站内搜索:
首页 >> 前端 >> 内容
vue指令v-html中使用过滤器filters功能教程

时间:2018/3/28 11:29:03

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中的使用

  • 上一篇:IE请求无响应,服务器报异常字符-RFC7230/3986的解决办法
  • 下一篇:dwz中dialog中包含多选和selectedTodo(代码)
  • 返回顶部