请问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: {

  isdelFormat: function() {

    // 这里返回html

    return +this.isdel === 1 ? '已作废' : '<a href="#">作废</a>'

  }

}