一文详解Vue中过滤器filters的使用
作者：夏志121
Vue.js允许自定义过滤器，过滤器的作用可被用于一些常见的文本格式化（也就是修饰文本，但是文本内容不会改变），本文主要来和大家讲讲过滤器filters的使用，感兴趣的可以了解一下
Vue.js允许自定义过滤器，过滤器的作用可被用于一些常见的文本格式化（也就是修饰文本，但是文本内容不会改变）
过滤器可以用在两个地方：双花括号插值或v-bind表达式
一、局部过滤器
局部过滤器使用示例：
<div id="root">
<p>电脑价格：{{price | addPriceIcon}}</p>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
price:200
},
filters: {
//处理函数
addPriceIcon(value){
console.log(value);
return '¥' + value;
}
}
})
</script>执行结果：
这段代码的需求是在价格前面加上人民币符号（¥）。模板中文版（price）后边需要添加管道符号（|）作为分隔，管道符（|）后边是文本的处理函数（addPriceIcon），处理函数的第一个参数是管道符前边的文本内容（price）。
二、全局过滤器
全局过滤器使用示例：
<div id="root">
<p>电脑价格：{{price | addPriceIcon}}</p>
</div>
<script>
Vue.config.productionTip = false;
Vue.filter("addPriceIcon",(value)=>{
return '¥' + value;
})
const vm = new Vue({
el: '#root',
data: {
price:200
}
})
</script>执行结果：
注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器
三、过滤器串联
过滤器还可以串联，例如：
{{price | filterA | filterB}}
filterA被定义为接收单个参数的过滤器参数，表达式price的值将被作为参数传入参数。然后继续调用同样被定义接收单个参数的过滤器函数filterB，将filterA的结果传递到filterB中。
过滤器串联示例：
<div id="root">
<p>电脑价格：{{price | addPriceIcon | addChinesePriceIcon}}</p>
</div>
<script>
Vue.config.productionTip = false;
Vue.filter("addPriceIcon",(value)=>{
return '¥' + value;
})
Vue.filter("addChinesePriceIcon",(value)=>{
return '人民币' + value;
})
const vm = new Vue({
el: '#root',
data: {
price:200
}
})
</script>执行结果：
四、过滤器接收多个参数
过滤器是JavaScript函数，因此可以接收两个参数：
{{ price | filterA(arg) }}
filterA被定义为接收两个参数的过滤器参数。其中price的值作为第一个参数，表达式arg的值可作为第二个参数，也可接收多个参数
过滤器接收两个参数示例：
<div id="root">
<p>电脑价格：{{price | addPriceIcon(unit)}}</p>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
price:200,
unit:"(元)"
},
filters: {
// 处理函数
addPriceIcon(value1,value2){
return '¥' + value1 + value2;
}
}
})
</script>执行结果：
过滤器接收多个参数示例：
<div id="root">
{{al | filterAa(a2,a3,...an...)}}
</div>
<script>
filters: {
// 处理函数
addPriceIcon(a1,a2,a3,...an...){
//a1是传入的第1个参数
//a2是传入的第2个参数
//a3是传入的第3个参数
//......
//an是传入的第n个参数
}
</script>以上就是一文详解Vue中过滤器filters的使用的详细内容，更多关于Vue过滤器filters的资料请关注脚本之家其它相关文章！