vue过滤器的使用

vue过滤器的使用

1 过滤器的作用

可以屏蔽关键字，转换一些的字符。比如你是*****的这种样式。

2使用的代码

视图层

 <div id='app'>
        {{msg}}
        {{msg | setMsg(666)}}
        <!-- {{msg | setMsg(666) | setMs(777)}} -->
    </div>

msg是自定义的信息，从data中传来，中间使用管道符|，右边是自定义过滤器的名字，括号里是传递的参数，与formate对应，也就是说括号里也可以传递数据。

model层

  Vue.filter('setMsg', function (data, formate) {
        console.log(data);
        console.log(formate);
        return data.replace('好人', '**')
        })

这里面data就是原始的数据，要更改的数据，即msg。formate就是上面括号里传递过来的参数，当然也可以不传，就是看你怎么用了。
data.replace()的意思就是把前者替换成后者。

    const vm = new Vue({
            el: '#app',
            data: {
                msg: '你是个大好人'
            },
            methods: {
            },
        })

3