v-html中使用filters

Vue2.0的过滤器只能应用在{{ }}和v-bind中，不再支持v-html中使用，如果要在v-html中使用过滤器，怎么办呢？

解决方法有三种：

1、使用全局方法

定义方法

methods: {
    formatTrend(val) {
      let trend = 'up';
      if(val.indexOf('-') > -1){
        trend = 'down';
        val = val.substr(1);
      }
      return `<i class="trend ${trend}"></i>${val}`;
    }
}

调用方法

<span v-html="formatTrend(value)"></span>

2、使用computed属性，当监听到数据发生变化的时候，会立即执行计算，并返回结果

定义原变量

data() {
      return {
	trendText: ''
	}
}

定义计算后的变量

computed: {
    trendHtml: function () {
    let trend = 'up' ,val = this.trendText;
      if(val.indexOf('-') > -1){
        trend = 'down';
        val = val.substr(1);
      }
      return `<i class="trend ${trend}"></i>${val}`;
  }

显示变量

<span v-html="trendHtml"></span>

3、使用$options.filters

定义filter

formatTrend(val) {
      let trend = 'up';
      if(val.indexOf('-') > -1){
        trend = 'down';
        val = val.substr(1);
      }
      return `<i class="trend ${trend}"></i>${val}`;
    }
export default {
formatTrend
}

引入filter

import { formatTrend } from '../../utils/filter.js'

调用filter

<span v-html="$options.filters.formatTrend(value)"></span>