一文详解Vue中过滤器filters的使用
更新时间：2023年04月23日 10:06:27 作者：夏志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的资料请关注脚本之家其它相关文章！
相关文章
vue项目中vue-i18n和element-ui国际化开发实现过程
这篇文章主要介绍了vue项目中vue-i18n和element-ui国际化开发实现过程，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue中的slot-scope及scope.row用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了如何基于Vue实现鼠标滚动轮控制页面横向滑动效果,文中通过代码示例和图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vue使用axios添加请求头方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue引入css文件导致全局污染的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
使用el-row及el-col页面缩放时出现空行的问题及解决
这篇文章主要介绍了使用el-row及el-col页面缩放时出现空行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue 中常见的时间格式转换,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了关于vue data中的this指向问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
uniapp小程序上传文件webapi后端项目asp.net完整代码
在uniapp中,实现文件上传功能也变得非常简单,下面这篇文章主要给大家介绍了关于uniapp小程序上传文件webapi后端项目asp.net的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了vue实现导航收缩框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论