Vue中过滤器如何使用？

过滤器是对即将显示的数据做进⼀步的筛选处理，然后进⾏显示，值得注意的是过滤器并没有改变原来 的数据，只是在原数据的基础上产⽣新的数据。过滤器分全局过滤器和本地过滤器（局部过滤器）。

目录

全局过滤器

本地过滤器

过滤器传参

串联过滤器

---

全局过滤器

下⾯定义⼀个全局过滤器，⽤于在数据前加上⼤写的VUE。需要注意的是，全局过滤器定义必须始终位于Vue实例之上，否则会报错。

   {{message | toAdd}}

对应的运行结果如下：

注意： 1. Vue.filter() 后有两个参数：过滤器名，过滤器处理函数。 2. 过滤器处理函数也有⼀个参数：要过滤的数据。

本地过滤器

本地过滤器存储在vue组件中，作为filters属性中的函数，我们可以注册多个过滤器存储在其中。

    
{{message | Reverse}}
    
{{message | Length}}

第一个p标签通过对得到的msg数据进行拆分，并将拆分之后的字符进行翻转，最后输出。第二个p标签通过获取得到的数据长度并显示出来。运行结果如下：

过滤器传参

除此之外，过滤器也是可以传递参数的。

   {{msg1 | toDou(1,2)}}
   {{msg2 | toDou(10,20)}}

以上的代码第一条插值表达式对得到的msg1进行过滤，该toDou过滤器传入两个参数，在过滤器中对传入的参数进行判断，若传入的第二个参数小于10，则会返回对应的msg1值加上第一个参数的值。第二条插值表达式同上。最后运行结果如下：

注意：过滤器处理函数的第⼀个参数，仍然是要过滤的数据。从第⼆个参数开始，才是过滤器本身要传递的参数。

串联过滤器

多个过滤器可以串联使⽤。

   {{money | prefix | suffix}}

以上的代码主要是对插值表达式中的值同时添加了两个过滤器，money会先得到prefix过滤器的处理，并将处理之后的值再给suffix过滤器进行处理。对应的代码运行效果如下：