请问vue filters怎么输出标签?

后台传过来一个数据是 {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>

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

回答:

html是不能直接输出的,需要用到v-html指令。
你可以给td绑定v-html="isdelFormat"

然后通过计算属性:

computed: {
  isdelFormat: function() {
    // 这里返回html
    return +this.isdel === 1 ? '已作废' : '<a href="#">作废</a>'
  }
}

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注