vue中过滤器的使用,vue如何定义一个过滤器
vue过滤器可以在不改变原始数据的情况下处理数据，然后将其返回到过滤后的数据进行呼叫处理。以下文章主要介绍了Vue中滤镜必备知识的相关信息，有需要的朋友可以参考一下。
目录
前言什么是滤镜，如何使用滤镜？全局过滤器和局部过滤器可以串联起来。
前言
大家好，今天就来分享一下Vue里的滤镜知识吧。
什么是过滤器
Vue.js允许你自定义过滤器，可以用于一些常见的文本格式。过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从2.1.0开始支持)。
如何使用过滤器
全局过滤器
这个案例是过滤价格中的人民币和人民币。
例1999.00元
定义一个资本化方法，传入value值。
如果值为空，则返回空字符串。
否则，将叠加字符串“RMB Yuan ”,其中toFixed(2)四舍五入到指定的小数位数。
施用方式
//main.js
Vue.filter(大写，函数(值){
如果(！value)返回“”；
返回value . to fixed(2)元；
});
用在双花括号中。
！- home.vue -
H1Vue过滤器/h1
p { { price capital } }/p
{{ 20.6664376486 大写}}
用于v-bind
H1Vue过滤器/h1
p :id=122 大写/p
局部过滤器
请注意，当全局过滤器和本地过滤器同名时，将使用本地过滤器。
本地过滤器可以在组件的选项中定义本地过滤器：
导出默认值{
名称：“索引”，
data() {
返回{
价格：1999
}
},
过滤器：{
大写：函数(值){
如果(！值)返回“”
返回value . to fixed(2)元
}
}
}
过滤器可以串联
在本例中，filterA被定义为接收单个参数的过滤函数，表达式消息的值将作为参数传递给该函数。然后继续调用过滤函数filterB，也定义为接收单个参数，将filterA的结果传入filterB。
{{邮件过滤器A 过滤器B }}
注意：
1.当有两个同名的过滤器，局部和全局时，会根据邻近原则调用，即先调用局部过滤器，后调用全局过滤器！
2.一个表达式可以使用多个过滤器。过滤器需要用管道符号“”隔开。执行顺序是从左到右。
总结
关于Vue中滤镜的必备知识这篇文章就到这里了。有关Vue滤镜的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。