Vue.js -- 双向过滤器去除html标签

Posted 2020-10-27 _Iniesta

<div id="box">
    <input type="text" v-model="msg | filterhtml">
    <br>
    <label v-html="msg"></label>
</div>

js:

new Vue({
    el:‘#box‘,
    data:{
        msg:‘<strong>这是段文字！</strong>‘//定义一段文字
   }
});

Vue.filter(‘filterHtml‘,{
    read:function(val){//val就是以获取的msg的值
        return val.replace(/<[^>]*>/g);//去除文字的<...></...>标签
    },
    write:function(){
        return val;
    }
});