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>

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值