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的资料请关注编程网其它相关文章!