概念:
- Vue.js允許自定義過(guò)濾器瘪吏,可被用作一些常見(jiàn)的文本格式化癣防。
- 過(guò)濾器可以用在兩個(gè)地方:mustache插值和v-bind表達(dá)式。
- 過(guò)濾器應(yīng)該被添加在javaScript表達(dá)式的尾部掌眠,由“管道”符指示
filter的調(diào)用方式:
{{ name | nameope }}
全局filter的定義語(yǔ)法:
過(guò)濾器中的function蕾盯,第一個(gè)參數(shù)已經(jīng)被規(guī)定死了,永遠(yuǎn)都是過(guò)濾器管道符前面?zhèn)鬟f過(guò)來(lái)的數(shù)據(jù) 如下的name
Vue.filter( ' 過(guò)濾器名稱(chēng) ' , function (data) { } )
例:
<p>{{ name | nameShow }}</p>
Vue.filter( ' nameShow ' , function (data) {
return name + ' 123 '
} )
過(guò)濾器的傳參:
<p>{{ name | nameShow( ' msg' ) }}</p>
Vue.filter( ' nameShow ' , function (data,msg) {
return name + msg
} )
過(guò)濾器也可以串寫(xiě)多個(gè):
過(guò)濾器串寫(xiě)之后從前往后執(zhí)行 然后把結(jié)果顯示出來(lái)
<p>{{ name | nameShow( ' msg' ) | nameTest}}</p>
Vue.filter( ' nameShow ' , function (data,msg) {
return name + msg
} )
Vue.filter( ' nameTest ' , function (data) {
return name + 666
} )
定義私有過(guò)濾器
定義私有過(guò)濾器需要兩個(gè)條件: 過(guò)濾器名稱(chēng) 和 處理函數(shù)
在Vue實(shí)例中添加對(duì)象filters:{ },與data同級(jí),然后直接寫(xiě)處理函數(shù)就可以
如果私有過(guò)濾器和全局過(guò)濾器名稱(chēng)一致蓝丙,優(yōu)先調(diào)用私有過(guò)濾器
data:{},
mehods:{}
filters:{
nameShow(){
return name + ' 私有過(guò)濾器 '
}
}