首先得知道过滤器是干嘛用的。比如说自来水从水厂到家,肯定是经过了多重的过滤才能被使用。那么vue过滤器也是如此。
用一张图来生动表示一下
过滤器的使用方法
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器的定义
//组件的选项中定义
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
//在组件之外定义
Vue.filter('capitalize', function (value) {
//如果value为空,就返回一个空字符串
if (!value) return ''
//将value转为字符串,以方便使用下面的字符串的API
value = value.toString()
//将首字母大写
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
过滤器串联使用
在上面总共定义了两种使用方式:在插值中和v-bind。还有两种定义方式:组件内和组件外。
但是还有一个中的特性即串联:即message传入filterA中,处理完后结果在返回给filterB。所以最后结果就是B返回的结果
{{ message | filterA | filterB }}
又因为过滤器是一个函数,故可以接受参数:filterA看似只有两个参数,但是实际上会接收三个,顺序为:message>arg1>arg2
{{ message | filterA('arg1', arg2) }}