Vue-过滤器的使用

过滤器

vue过滤器可以格式化常用文本，vue过滤器只能在插值表达式{{}}和v-bind中使用

过滤器 filter 顾名思义就是用来格式化数据的东西，可以是从中取得你想要的，或者给那个数据添加点什么，例如，从['abc','abd','ade']数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’。

过滤器又分为全局过滤器和私有过滤器（局部过滤器）

定义一个全局过滤器：

Vue.filter('过滤器名'，执行的函数);

举个例子：

<div id="app">
        <p>{{msg | myFilter}}</p>
        <!--第一个参数msg为data中的数据，第二个参数myFilter是过滤器名称
        两者之间用 | 隔开,当程序运行时，msg的值会传递到过滤器，经过过滤
        器后，最终的结果是过滤器返回的值-->
</div>
<script>
        //定义一个全局过滤器：
        // Vue.filter('过滤器名字',函数);   
        Vue.filter('myFilter', function (msg) {//msg为需要过滤的数据
            return msg.replace(/天天/g, '日日');
            //正则不需要加引号 
            // 匹配所有的天天  将其替换成日日
        })

        let vm = new Vue({
            el: '#app',
            data: {
                msg: '好好学习，天天向上，天天开心，天天快乐'
            }
        })
</script>

上面的代码中，首先定义了一个全局过滤器myFilter，然后在data中定义了一个字符串msg,在过滤器中会将所接受到的参数中的天天二字替换成日日二字，并返回。

第二个参数----回调函数

function (msg) {//msg为需要过滤的数据
     return msg.replace(/天天/g, '日日');
}

可以发现里面有一个参数，{{msg |myFilter}}中的msg的值（即data）会保存在回调函数中的第一个形参中，那么如何自己传入别的参数呢？
我们修改一下上面的代码:

<div id="app">
        <p>{{msg | myFilter('夜夜')}}</p>
</div>
<script>  
        Vue.filter('myFilter', function (msg,newData) {//msg为需要过滤的数据
            return msg.replace(/天天/g, newData);
        })
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '好好学习，天天向上，天天开心，天天快乐'
            }
        })
</script>

运行代码会发现已经将html中的天天改成了夜夜，这里msg为fn的第一个实参，'夜夜'为第二个实参。

多个过滤器

<div id="app">
    <p>{{ msg | myFilter("夜夜") | myFilter2 }}</p>
</div>
<script>
    Vue.filter('myFilter', function (msg, newData) {
        return msg.replace(/天天/g, arg);
    });
    Vue.filter('myFilter2', function (newData) {
        return msg + "-----我是filter2";
    })
    let vm= new Vue({
       el: '#app',
       data: {
           msg: '好好学习，天天向上，天天开心，天天快乐'
       }
    });
</script>