请问vue filters怎么输出标签?

Question

后台传过来一个数据是 {isDel:0} 0 表示作废 1 表示已作废

”是否作废“为选择是否作废该发票，点击”作废“弹出确认框，

提示”一经作废无法更改，确认要作废该发票”，

确认操作后该发票状态变为“已作废”

组件是这个样子的(问题相关)

components: {

    "my-row": {

        template: "<tr><td>{{isdel | checkIsdel}}</td></tr>",

        props: ['isdel'],

        filters: {

            checkIsdel: function(num){

                if (num == 1) {

                    return '已作废';

                } else {

                    var str = "<a href='#'>作废</a>";

                    return str;

                }

            }

        }

    }

},

但是这样输出后是转码的<td>&lt;a href='#'&gt;作废&lt;/a&gt;</td>形式，输出在样页面上就是

<a href='#'>作废</a>

这个样子，就不能点击。请问怎么输出可以点击的呢？或者有什么其他办法？

Answer 1

html是不能直接输出的，需要用到v-html指令。你可以给td绑定v-html="isdelFormat"。然后通过计算属性：computed: {&nbsp; isdelFormat: function() {&nbsp; &nbsp; // 这里返回html&nbsp; &nbsp; return +this.isdel === 1 ? '已作废' : '<a href="#">作废</a>'&nbsp; }}