Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:
在双花括号中写法
{{item | call }}
// 前一个的值是后一个的第一个参数
在 v-bind
中写法
<div v-bind:id="wrap | call"></div>
定义本地过滤器的方法
filters: {
call(val) {
return val.replace(/top/, '')
}
}
定义全局过滤器的方法
Vue.filter('call', function (value) {
return val.toUpperCase();
})
new Vue({
// ...
})
当全局过滤器和局部过滤器重名时,会采用局部过滤器
之前说了前一个的值会作为后一个的第一个参数,也表示着过滤器可以串联例如
{{ item | call1 | call2 }}
// item的值作为参数传到函数call1然后执行返回的值又作为参数传到函数call2中
这里call1、call2都是过滤函数他们也可以以call1(arg1,arg2)的形式传参,那么item即为第一个参数,arg1的值为第二个参数,arg2的值为第三个参数,如下:
{{ message | call1('arg1', arg2) }}