vue指令v-html中使用过滤器filters功能教程
1
问题原因:
Vue2.0 不再支持在 v-html 中使用过滤器
解决方法:
1: 全局方法(推介)
2: computed 属性
3: $options.filters(推介)
具体用法如下一页:
2
1:使用全局方法
可以在 Vue 上定义全局方法:
Vue.prototype.msg= function (msg) {
return msg.replace("\n", "<br>")
};
然后所有地方上都可以直接用这个方法了:
<p v-html="msg(content)"></p>
3
2 : computed 属性
var appMain= new Vue({
el: '#appMain',
computed :{
content: function (msg) { return msg.replace("\n", "<br>")
},
},
data: {
content: "XXXXX"
}
})
页面上:
<p>{{content}}</p>
4
3: $options.filters
在定义的vue里的filter添加方法:
var appMain= new Vue({
el: '#appMain',
filters:{
msg: function(msg) {
return msg.replace(/\n/g, "<br>") ;
}
},
data: {
content: "XXXXX"
}
})
然后页面上都可以直接用这个方法了:
<p id="appMain">
<p v-html="$options.filters.msg(content)"></p>
</p>
vue在html中的使用