前言
Vue的过滤器，了解一下？
过滤器，顾名思义，字面意思就是将一种数据经过加工过滤成另外一种数据。
常见的业务场景就是对一些常见的文本格式化。
正文
过滤器的用处
过滤器可以用在两个地方: 双花括号插值 和 v-bind表达式。
<!--过滤器用于双花括号插值-->
<p>{{ time | formatDate }}</p>
<!--过滤器用于v-bind表达式-->
<div :id="rawId | formatId"></div>
由上面示例代码应该不难看出，在使用过滤器的时候，语法规则：需过滤的文本 加上 “管道”符号（｜） 然后加上过滤器，即 文本 ｜ 过滤器。
过滤器的定义
在Vue中常见的过滤器分为2种：局部过滤器和全局过滤器。
全局过滤器
全局过滤器即在创建Vue实例时全局定义过滤器。
示例代码：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
局部过滤器
示例代码：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
小结
由上面过滤器的定义不难看出，过滤器filters其实是一个默认只有一个参数的function。如果我们想定义一个多个参数的写法如下：
filters: {
formatData: function (value, arg1, arg2) {
if (!value) return ''
return arg1 + value + arg2
}
}
两种多参数过滤器的使用语法，效果相同，都是调用上面定义的formatData过滤器，如下:
<!-- 语法一 -->
<p>{{ nickname ｜ formatData('上午好，欢迎','加入Vue学习之旅') }}</p>
<!-- 语法二 -->
<p> {{ nickname, '上午好，欢迎', '加入Vue学习之旅'｜ formatData }} </p>
使用注意
- 当局部过滤器和全局过滤器重名时，局部过滤器的优先级高，所以会采用局部过滤器；
- 一个表达式可以使用多个过滤器。过滤器之间可以使用管道符号“｜”隔开。它的执行顺序是从左到右。
