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

依然范特西╮ 提交于 2020-03-02 11:36:00

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>

实例场景分析以及应用:当后台返回的数据包含一些特殊字符需要处理时,代码如下:

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!