欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-02-05 08:53:22
1 问题原因: Vue2.0 不再支持在 v-html 中使用过滤器 解决方法: 1: 全局方法(推介) 2: computed 属性 3: $options.filt...

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