# 自定義過濾器
## 基礎
類似于自定義指令,可以用全局方法 `Vue.filter()` 注冊一個自定義過濾器,它接收兩個參數:**過濾器 ID** 和**過濾器函數**。過濾器函數以值為參數,返回轉換后的值:
```
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
```
```
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
```
過濾器函數可以接收任意數量的參數:
```
Vue.filter('wrap', function (value, begin, end) {
return begin + value + end
})
```
```
<!-- 'hello' => 'before hello after' -->
<span v-text="message | wrap 'before' 'after'"></span>
```
## 雙向過濾器
目前我們使用過濾器都是在把來自模型的值顯視在視圖之前轉換它。不過也可以定義一個過濾器,在把來自視圖(`<input>` 元素)的值寫回模型之前轉化它:
```
Vue.filter('currencyDisplay', {
// model -> view
// 在更新 `<input>` 元素之前格式化值
read: function(val) {
return '/figure>+val.toFixed(2)
},
// view -> model
// 在寫回數據之前格式化值
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})
```
示例:

## 動態參數
如果過濾器參數沒有用引號包起來,則它會在當前 vm 作用域內動態計算。另外,過濾器函數的 `this` 始終指向調用它的 vm。例如:
```
<input v-model="userInput">
<span>{{msg | concat userInput}}</span>
```
```
Vue.filter('concat', function (value, input) {
// `input` === `this.userInput`
return value + input
})
```
上例比較簡單,也可以用表達式達到相同的結果,但是對于更復雜的邏輯——需要多于一個語句,這時需要將它放到計算屬性或自定義過濾器中。
內置過濾器 `filterBy` 和 `orderBy`,根據所屬 Vue 實例的當前狀態,過濾/排序傳入的數組。
- 教程
- 起步
- 概述
- Vue 實例
- 數據綁定語法
- 計算屬性
- Class 與 Style 綁定
- 條件渲染
- 列表渲染
- 方法與事件處理器
- 表單控件綁定
- 過渡
- 組件
- 深入響應式原理
- 自定義指令
- 自定義過濾器
- 混合
- 插件
- 構建大型應用
- 對比其它框架
- API
- 示例
- Markdown 編輯器 Example
- GitHub 提交 Example
- Firebase + 驗證 Example
- 表格組件 Example
- 樹狀視圖 Example
- SVG 圖形 Example
- 模態組件 Example
- Elastic Header Example
- 自定義指令 Example
- TodoMVC Example
- HackerNews 克隆 Example