过滤器是对即将显示的数据做进⼀步的筛选处理，然后进⾏显示，值得注意的是过滤器并没有改变原来 的数据，只是在原数据的基础上产⽣新的数据。过滤器分全局过滤器和本地过滤器（局部过滤器）。
目录
全局过滤器
本地过滤器
过滤器传参
串联过滤器
全局过滤器
下⾯定义⼀个全局过滤器，⽤于在数据前加上⼤写的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过滤器进行处理。对应的代码运行效果如下：文章来源：https://www.toymoban.com/news/detail-689236.html
文章来源地址https://www.toymoban.com/news/detail-689236.html
到了这里，关于Vue中过滤器如何使用？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
