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

1. 1

   问题原因：

   Vue2.0 不再支持在 v-html 中使用过滤器

   解决方法：

   1： 全局方法（推介）

   2： computed 属性

   3： $options.filters（推介）

   具体用法如下一页：

2. 2

   1：使用全局方法

   可以在 Vue 上定义全局方法：

   Vue.prototype.msg= function (msg) {  

       return msg.replace("\n", "<br>")

   };

   然后所有地方上都可以直接用这个方法了:

   <div  v-html="msg(content)"></div>

3. 3

   2 : computed 属性

   var appMain= new Vue({

         el: '#appMain',

         computed :{

            content： function (msg) {            return msg.replace("\n", "<br>")

             },

         },

         data: {

           content: "XXXXX"

        }

   }）

   页面上：

   <div>{{content}}</div>

4. 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"

        }

   })

   然后页面上都可以直接用这个方法了:

   <div id="appMain">

       <div  v-html="$options.filters.msg(content)"></div>

   </div>

vue在html中的使用