vue中的过滤器filter你了解多少？

vue中的过滤器filter

1，过滤器的作用

  简单的说就是拦截和相应

2，过滤器都可以在哪些地方使用呢？

  过滤器只能在mustache（插值表达式）和v-bind中使用

3，那么如何定义一个过滤器呢？

定义过滤器格式如下：

Vue.filter(name,function（）{})
//name是过滤器名，function是操作,此方法定义的是一个全局过滤器
复制代码

4，如何使用一个过滤器？

下面以插值表达式中使用为例： 主要代码如下：

//利用过滤器把msg中的喜欢全部替换成爱
<div id="app">
// 在插值表达式中利用过滤器  |后面跟上过滤器名
        <p>{{ msg | msgFormat }}</p>
    </div>
    <script>
        Vue.filter('msgFormat',function(msg){
            return msg.replace(/喜欢/g,"爱")
            //在上面中添加正则表达式进行模式匹配，为什么不用字符串直接代替正则表达式有兴趣的可以自己私下去练习，也可以联系我。
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "喜欢喜欢喜欢喜欢喜欢喜欢……",
            },
            methods: {
            },
        })
    </script>
复制代码

结果如下：

5，上面讲述了如何定义全局过滤器，那如何定义私有过滤器呢？

私有过滤器定义方式： 通过filters属性可以定义私有过滤器 具体定义方式主要代码演示：

//利用过滤器把msg中的喜欢全部替换成love
 <div id="app">
        <p>{{ msg | msgFormat }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "喜欢喜欢喜欢喜欢喜欢喜欢……",
            },
            methods: {

            },
            filters:{
                msgFormat:function(msg){
                    return msg.replace(/喜欢/g,"love")
                },
            },
        })
    </script>
复制代码

结果如下：

6，那么问题又来了，当全局过滤器和私有过滤器名相同时，调用哪个过滤器呢？

过滤器调用是符合就近原则的 主要代码演示：

//全局过滤器把喜欢替换成爱，私有过滤器替换成love
<div id="app">
        <p>{{ msg | msgFormat }}</p>
    </div>
    <script>
        Vue.filter('msgFormat',function(msg){
            return msg.replace(/喜欢/g,"爱")
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "喜欢喜欢喜欢喜欢喜欢喜欢……",
            },
            methods: {

            },
            filters:{
                msgFormat:function(msg){
                    return msg.replace(/喜欢/g,"love")
                },
            },
        })
    </script>
复制代码

结果如下：

7，可以同时调用多个过滤器吗？

答案是肯定的，多个过滤器调用时，按照调用顺序依次把结果传递到下一个过滤器，直至结束返回最终调用结果 代码简单演示一下：

<div id="app">
        <p>{{ msg | msgFormat1 | msgFormat2}}</p>
    </div>
    <script>
        Vue.filter('msgFormat1',function(msg){
            return msg.replace(/喜欢/g,"爱")
        })
        Vue.filter('msgFormat2',function(msg){
            return msg.replace(/你/g,"我")
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: "你你你你你你你喜欢喜欢喜欢喜欢喜欢喜欢……",
            },
            methods: {

            },
        })
    </script>
复制代码

结果如下：

注： 如有问题可以评论区评论，也可以加本人QQ：2499578824

转载于:https://juejin.im/post/5cf3302051882502f9490572