vue2.0版本中v-html中过滤器的使用

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

解决方法:

1:全局方法(推荐)

2:computed 属性

3:$options.filters(推荐)

1:使用全局方法:

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

1 Vue.prototype.msg = function(msg){
2 
3   return msg.replace("\n","<br>")
4 
5 };

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

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

2:computed 属性

 1 var appMain = new Vue({
 2 
 3   data:{
 4 
 5     content:"XXX"
 6 
 7   },
 8 
 9   el:"#appMain",
10 
11   computed:{
12 
13     content:function(msg){
14 
15       return msg.replace("\n","<br>")
16 
17     }
18 
19   }
20 
21 })

页面上:

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

3:$options.filters:

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

 1 var appMain = new Vue({
 2 
 3   el:"#appMain",
 4 
 5   filters:{
 6 
 7     msg:function(msg){
 8 
 9       return msg.replace(/\n/g,"<br>")
10 
11     }
12 
13   },
14 
15   data:{
16 
17     content:"XXXX"
18 
19   }
20 
21 })

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

1 <div >
2 
3   <div v-html="$options.filters.msg(content)"></div>
4 
5 </div>

参考:https://www.cnblogs.com/rxqlx/p/10330517.html