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

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

解决方法:vue

1:全局方法(推荐)app

2:computed 属性prototype

3:$options.filters(推荐)htm

1:使用全局方法:blog

能够在 Vue 上定义全局方法:io

Vue.prototype.msg = function(msg){function

  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>

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

相关文章
相关标签/搜索