javascript - 请问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>'
  }
}

这篇关于javascript - 请问vue filters怎么输出标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！