Vue04-filters过滤器总结

最新推荐文章于 2023-01-21 14:37:43 发布

杨杨卡不答

最新推荐文章于 2023-01-21 14:37:43 发布

阅读量255

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js html

本文链接：https://blog.csdn.net/qq_46801776/article/details/120338111

Vue 专栏收录该内容

5 篇文章

订阅专栏

1、什么是过滤器？

先看一下官方给出的解释（如下图）：
在这里插入图片描述
稍稍说一下自己的见解吧，过滤器就是对一个即将显示的数据经过了进一步的筛选处理之后得到了新的数据，我们可以通过过滤器得到我们想要的数据，或者对已有的数据进行一种美化产生新的效果。
另外就是和官方解释的过滤器特性，过滤器可以在new Vue之前定义全局的或者在组件上注册局部的。

注：全局注册时过滤器的关键词是filter，没有s。但是局部的过滤器是filters，虽然写的时候没有s不报错，但是过滤器是没有效果的

2、过滤器的用法

2.1、双花括号插值

{{‘ok’ | globalFilter}}

2.2、在v-bind表达式中使用

< div v-bind:data="‘ok’ | globalFilter">< /div >

2.3、过滤器的参数写法

一、{{message | filterA | filterB}}

上述代码中，message是作为参数传给filterA函数，而filterA函数的返回值作为参数传给flterB函数，最终结果显示是由filterB返回的。
在这里插入图片描述

二、{{message | filterA(‘arg1’,arg2)}}

上述代码中，filterA的第一个参数是message，之后是‘arg1’和arg2
在这里插入图片描述

三、{{‘a’,‘b’ | filterB}}

上述代码表示‘a’，‘b’分别作为参数传递给filterB
在这里插入图片描述

3、实例

1、传递一个参数的全局过滤器

<body>

    <div id="app">
        <div>
            <!--在message显示之前先进行一个大写转换-->
           {{message | toUppercase}}  
        </div>
        <script>
        //在new Vue之前定义过滤器
            Vue.filter('toUppercase',function(value){
                return value.toUpperCase()
    })
            var vm = new Vue({
                el:'#app',
                data:{
                    message: 'helloworld'
               },
          //为了与全局过滤器形成对比，在这里定义局部过滤器
    //            filters:{
    //                toUppercase(value){
    //                    return value ? value.toUppercase() : '';
    //                }
     //           }
            });
        </script>
    </div>

    
</body>

2、传递多个参数的局部过滤器

<body>
    <div id="app">

        <!--过滤器接收多个参数-->
        <span>{{value1|multiple(value2,value3)}}</span>
    
    </div>

    <script>
        /*全局过滤器对比
        Vue.filter('multiple',function(value1,value2,value3){
            return value1*value2*value3
        })
        */
        var vm = new Vue(
          {
            el: '#app',
            data: {
              msg: 'hello',
              value1:10,
              value2:20,
              value3:30
            },
          //局部过滤器
            filters: {
              'multiple': function (value1, value2, value3) {
                return value1*value2*value3
              }
            }
      
          }
        )
      
      </script>
    
</body>

4、一些小问题

4.1、如果全局过滤器与局部过滤器名字相同时，调用哪个？

答：过滤器调用遵循就近原则，因此程序会采用局部过滤器。

4.2、可以调用多个过滤器吗？

答：参考第一种过滤器调用方法，答案是肯定的，并且会按照调用过滤器的顺序依次把结果传递给下一个过滤器，直到返回最终调用结果。

4.3、filters可以用methods代替吗？

答：filters可以再不改变data的情况下输出前端需要的数据格式，并且可以在一个{{message}}模板中添加多个filter对message进行处理，由此看来，filter主要作用是将内容格式化，将输入的数据按照某种规则输出。但是methods的作用是对数据，交互等的逻辑处理，比filter功能更加纯粹，尽量不直接操作DOM。