Vue中过滤器filters怎么使用
这篇文章主要介绍“Vue中过滤器filters怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue中过滤器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怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注蜗牛博客行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论