Vue中过滤器如何使用？

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

目录

全局过滤器

本地过滤器

过滤器传参

串联过滤器

---

全局过滤器

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

<div id="app">{{message | toAdd}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>Vue.filter("toAdd", function(value) {return 'VUE' + value})var demo = new Vue({el: '#app',data: {message: '过滤器',}})
</script>

对应的运行结果如下：

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

本地过滤器

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

<div id="app"><p>{{message | Reverse}}</p><p>{{message | Length}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var demo = new Vue({el: '#app',data: {message: '过滤器',},filters: {Reverse: function(value) {if (!value){return '';}return value.toString().split('').reverse().join('');},Length: function(value) {return value.length;},},})
</script>

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

过滤器传参

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

<div id="app">{{msg1 | toDou(1,2)}}{{msg2 | toDou(10,20)}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>Vue.filter('toDou', function(value, param1, param2) {if (param2 < 10) {return value + param1;} else {return value + param2;}});new Vue({el: '#app',data: {msg1: 9,msg2: 12,}});
</script>

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

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

串联过滤器

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

<div id="app">{{money | prefix | suffix}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>Vue.filter("prefix", function(value) {return '￥' + value})Vue.filter("suffix", function(value) {return  value + '元'})var demo = new Vue({el: '#app',data: {money:10}})
</script>

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