vue指令v-html中使用过滤器filters

当我们需要对后台返回的数据进行处理，生成不同的html标签，有以下三种办法

方法一：使用全局方法

// 可以在 Vue 上定义全局方法：
Vue.prototype.filterMsg= function (msg) {  
    if (msg == null || msg == '') {
        return ''
    }else if (msg.length > 3 || !/^\d/.test(msg)) {
        // 字数大于3或者不以数字开头
        return `<small>${msg}</small>`
    }else if (msg.indexOf('层') > 0) {
        return `<em>${msg.replace('层', '')}</em>
        <small>层</small>`
     } 
    return `<em>${msg}</em>`

};

//然后所有地方上都可以直接用这个方法了:
<div  v-html="filterMsg(content)"></div>

方法二：使用 $options.filters

//在定义的vue组件中添加filter方法
 filters: {
    filterMsg(msg) {  
        if (msg == null || msg == '') {
            return ''
        }else if (msg.length > 3 || !/^\d/.test(msg)) {
            // 字数大于3或者不以数字开头
            return `<small>${msg}</small>`
        }else if (msg.indexOf('层') > 0) {
            return `<em>${msg.replace('层', '')}</em>
            <small>层</small>`
         }
        return `<em>${msg}</em>`
    }
}

//然后再页面上使用过滤器
<div v-html="$options.filters.filterMsg(content)"></div>

方法二：使用 计算属性computed （数组遍历中不适用）

//在定义的vue组件中添加计算属性
 computed: {
   computedMsg() {  
        if (this.msg == null || this.msg == '') {
            return ''
        }else if (this.msg.length > 3 || !/^\d/.test(this.msg)) {
            // 字数大于3或者不以数字开头
            return `<small>${this.msg}</small>`
        }else if ((thismsg.indexOf('层') > 0) {
            return `<em>${(thismsg.replace('层', '')}</em>
            <small>层</small>`
         }
        return `<em>${this.msg}</em>`
    }
}

//然后再页面上使用计算属性
<div  v-html="computedMsg"></div>