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

Logo

前往低代码交流专区

更多推荐