Vue.js 允許你自定義過濾器擅威,可被用于一些常見的文本格式化具帮。過濾器可以用在兩個地方:雙花括號插值和v-bind表達式 (后者從 2.1.0+ 開始支持)柿究。過濾器應(yīng)該被添加在 JavaScript 表達式的尾部斑司,由“管道”符號指示:
在雙花括號中寫法
{{item | call }}
// 前一個的值是后一個的第一個參數(shù)
在 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({
// ...
})
當全局過濾器和局部過濾器重名時绽媒,會采用局部過濾器
之前說了前一個的值會作為后一個的第一個參數(shù)妙蔗,也表示著過濾器可以串聯(lián)例如
{{ item | call1 | call2 }}
// item的值作為參數(shù)傳到函數(shù)call1然后執(zhí)行返回的值又作為參數(shù)傳到函數(shù)call2中
這里call1傲霸、call2都是過濾函數(shù)他們也可以以call1(arg1,arg2)的形式傳參,那么item即為第一個參數(shù)眉反,arg1的值為第二個參數(shù)昙啄,arg2的值為第三個參數(shù),如下:
{{ message | call1('arg1', arg2) }}