概要

一個(gè) Vue.js 的過(guò)濾器本質(zhì)上是一個(gè)函數(shù)，這個(gè)函數(shù)會(huì)接收一個(gè)值，將其處理并返回。過(guò)濾器在指令中由一個(gè)管道符 (|) 標(biāo)記，并可以跟隨一個(gè)或多個(gè)參數(shù)：

<element directive="expression | filterId [args...]"></element>

示例

過(guò)濾器必須放置在一個(gè)指令的值的最后：

<span v-text="message | capitalize"></span>

你也可以用在 mustache 風(fēng)格的綁定的內(nèi)部：

<span>{{message | uppercase}}</span>

可以串聯(lián)多個(gè)過(guò)濾器：

<span>{{message | lowercase | reverse}}</span>

參數(shù)

一些過(guò)濾器是可以接受參數(shù)的。參數(shù)用空格分隔開：

<span>{{order | pluralize 'st' 'nd' 'rd' 'th'}}</span>

<input v-on="keyup: submitForm | key 'enter'">

純字符串參數(shù)需要用引號(hào)包裹。無(wú)引號(hào)的參數(shù)會(huì)作為表達(dá)式在當(dāng)前數(shù)據(jù)作用域內(nèi)動(dòng)態(tài)計(jì)算。在后面講到自定義過(guò)濾器時(shí)，我們進(jìn)一步討論這些細(xì)節(jié)。

上述示例的具體用法參見完整的內(nèi)建過(guò)濾器列表。

現(xiàn)在你已經(jīng)了解了指令和過(guò)濾器，接下來(lái)我們趁熱打鐵，看看如何 展示一個(gè)列表。