自定义Vue过滤器

1.全局过滤器

（1）创建过滤器

Vue.filter(过滤器名称"，function（value）{

return   ...

})

（2）过滤器的使用

{{ 原本数据| ‘过滤器的名称’}}

    <div id="app">
        <div>{{ content | contentFilter }}</div>       //过滤器的使用
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.filter("contentFilter",function(value){    //创建全局过滤器
       if(!value){
           return
       }
     return  value.toString().toUpperCase().replace(/SB/g,"**")
        })
    var vm = new Vue({
    el: '#app',
    data: {
    content:"这个人就是个大SB"
    }
    })
    </script>

（2）定义局部过滤器

    <div id="app">
        <div>{{ content | contentFilter }}</div>
        <input type="text" v-model=" content">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        
    var vm = new Vue({
    el: '#app',
    data: {
    content:"这个人就是个大SB"
    },
    filters:{
        contentFilter:function(value){
            if(!value){
            return
       }
     return  value.toString().toUpperCase().replace(/SB/g,"**")    
        }
    }
    })
    </script>