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

本文转载自查看原文 2019-04-22 15:48 1797

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 id="appMain">
2 
3 　　<div v-html="$options.filters.msg(content)"></div>
4 
5 </div>

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 vue项目中指令 v-html 中使用过滤器filters功能 vue2.0 之文本渲染-v-html、v-text vue中filters（过滤器）的使用 Vue v-html 的使用 vue中的过滤器 Vue2.0的变化(1)——vue2.0组件定义/生命周期/循环/自定义键盘/过滤器/组件通信的变化 Vue中全局过滤器期与局部过滤器期的使用 Vue.js中过滤器（filter）的使用 Vue.js中过滤器（filter）的使用 Vue.js中过滤器（filter）的使用