基礎(chǔ)

和自定義指令類似，你可以用全局方法 Vue.filter()，傳遞一個(gè)過濾器 ID 和一個(gè)過濾器函數(shù)來注冊一個(gè)自定義過濾器。過濾器函數(shù)會接受一個(gè)參數(shù)值并返回將其轉(zhuǎn)換后的值：

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>

過濾器函數(shù)也可以接受內(nèi)聯(lián)參數(shù)：

Vue.filter('wrap', function (value, begin, end) {
  return begin + value + end
})

<!-- 'hello' => 'before hello after' -->
<span v-text="message | wrap 'before' 'after'"></span>

雙向過濾器

到目前為止，我們使用過濾器都是把來自模型的值在顯示到視圖之前進(jìn)行轉(zhuǎn)換。其實(shí)我們也可以定義一個(gè)過濾器，在把來自視圖的值（input 元素）在寫回模型之前進(jìn)行轉(zhuǎn)換：

Vue.filter('check-email', {
  // 這里 read 可選，只是為了演示
  read: function (val) {
    return val
  },
  // write 函數(shù)會在數(shù)據(jù)寫入到模型之前被調(diào)用
  write: function (val, oldVal) {
    return isEmail(val) ? val : oldVal
  }
})

動態(tài)參數(shù)

如果一個(gè)過濾器參數(shù)沒有被引號包裹，它會在當(dāng)前 vm 的數(shù)據(jù)作用域里當(dāng)做表達(dá)式進(jìn)行動態(tài)求值。此外，過濾器函數(shù)的 this 上下文永遠(yuǎn)是調(diào)用它的當(dāng)前 vm。

<input v-model="userInput">
<span>{{msg | concat userInput}}</span>```

```Vue.filter('concat', function (value, input) {
  // 這里 `input` === `this.userInput`
  return value + input
})

在上面這個(gè)例子中，顯然用內(nèi)聯(lián)表達(dá)式也可以達(dá)成相同的效果。但是面對更復(fù)雜的需求時(shí)，常常需要不止一個(gè)語句，這種情況下你就得把邏輯放到一個(gè)計(jì)算屬性中或是一個(gè)自定義過濾器中。

內(nèi)建的 filterBy 和 orderBy 過濾器都是根據(jù)當(dāng)前 Vue 實(shí)例的狀態(tài)對傳入的數(shù)組進(jìn)行處理。

很好！現(xiàn)在，是時(shí)候了解 Vue 的核心概念：組件系統(tǒng)了。