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

Vue 2.0 不再支持在 v-html 中使用过滤器

解决方法:

1:全局方法(推荐)

2:computed 属性

3:$options.filters(推荐)

1:使用全局方法:

可以在 Vue 上定义全局方法:

Vue.prototype.msg = function(msg){

  return msg.replace("\n","<br>")

};

然后所有地方上都可以直接用这个方法了:

<div v-html="msg(content)"></div>

2:computed 属性

var appMain = new Vue({

  data:{

    content:"XXX"

  },

  el:"#appMain",

  computed:{

    content:function(msg){

      return msg.replace("\n","<br>")

    }

  }

})

页面上:

<div>{{content}}</div>

3:$options.filters:

在定义的vue里的filter添加方法:

var appMain = new Vue({

  el:"#appMain",

  filters:{

    msg:function(msg){

      return msg.replace(/\n/g,"<br>")

    }

  },

  data:{

    content:"XXXX"

  }

})

然后页面上都可以直接用这个方法了:

<div id="appMain">

  <div v-html="$options.filters.msg(content)"></div>

</div>

猜你喜欢

转载自www.cnblogs.com/rxqlx/p/10330517.html