在vue1.0中瞎饲，我們見(jiàn)到過(guò)很多的內(nèi)置過(guò)濾器沈善，如 filterBy乡数、orderBy等等椭蹄，但是在vue 2.0中，這些內(nèi)置過(guò)濾器已經(jīng)全部舍棄掉净赴。
在vue2.0中绳矩，我們想使用過(guò)濾器的話，就需要自己動(dòng)手寫一個(gè)自定義過(guò)濾器玖翅，具體怎么搭建翼馆，下面就來(lái)說(shuō)一說(shuō)，不過(guò)在這之前金度，我們先來(lái)了解下应媚，過(guò)濾器的作用和本質(zhì)是什么。
作用 : 對(duì)數(shù)據(jù)進(jìn)行篩選猜极、過(guò)濾中姜、格式化等處理
本質(zhì) : 一個(gè)帶有參數(shù)和返回值的方法
通過(guò)上面，我們不難看出魔吐，過(guò)濾器其實(shí)是一個(gè)方法扎筒。那么，這個(gè)方法是什么樣子的呢酬姆？我們?cè)撛趺慈戇@個(gè)方法嗜桌？
在vue 2.0中，已經(jīng)給出了我們這個(gè)書寫格式
首先是使用方法
<!-- 在雙花括號(hào)中 -->
{{ message | capitalize }}
<!-- 在 ' v-bind ' 中 -->
<div v-bind:id="rawId | formatId"></div>
在一個(gè)組件的選項(xiàng)中定義本地的過(guò)濾器
filters : {
????capitalize : function (value) {
????????if ( !value ) return ' '
????????value = value.toString()
????????return value.charAt(0).toUpperCase() + value.slice(1)
}
在創(chuàng)建 Vue 實(shí)例之前全局定義過(guò)濾器
Vue.filter('capitalize',? function (value) {
????if? (!value)? return ''
????value = value.toString()
????return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue ({
?????// ...
})
使用
{{ message | capitalize }}
過(guò)濾器函數(shù)總接收表達(dá)式的值 (之前的操作鏈的結(jié)果) 作為第一個(gè)參數(shù)辞色。在上述例子中骨宠，capitalize?過(guò)濾器函數(shù)將會(huì)收到?message?的值作為第一個(gè)參數(shù)。
過(guò)濾器可以串聯(lián)：
{{ message | filterA | filterB }}
在這個(gè)例子中相满，filterA?被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù)层亿，表達(dá)式?message?的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù)?filterB立美，將?filterA?的結(jié)果傳遞到?filterB?中匿又。
過(guò)濾器是 JavaScript 函數(shù)，因此可以接收參數(shù)：
{{ message | filterA('arg1', arg2) }}
這里建蹄，filterA?被定義為接收三個(gè)參數(shù)的過(guò)濾器函數(shù)碌更。其中?message?的值作為第一個(gè)參數(shù)，普通字符串?'arg1'?作為第二個(gè)參數(shù)洞慎，表達(dá)式?arg2?的值作為第三個(gè)參數(shù)痛单。
