在了解過濾器之前，我們需要明確一個概念--過濾器，本質上都是函數。其作用在於用戶輸入數據后，它能夠進行處理，並返回一個數據結果。Vue.js與AngularJS中的過濾器語法有些類似，使用管道符（|）進行連接。
一、內置過濾器
Vue.js內置了一系列常用的過濾器，可以直接進行調用。這些內置過濾器都相對比較簡單，如果要實現比較復雜或者需要定制的過濾功能，還需要借助自定義過濾器的方式。當然，這些內置的過濾器使用時無須定義，使用起來比較容易。
1.字母操作
Vue.js內置了capitalize、uppercase、lowercase三個過濾器用於處理英文字符。注：這三個過濾器僅針對英文字符串使用。
1.capitalize
capitalize過濾器用於將表達式中的首字母轉換為大寫形式。代碼示例如下:
{{'ddfe' | capitalize}}
//'ddfe'=>'Ddfe'
2.uppercase
uppercase過濾器用於將表達式中的所有字母轉換為大寫形式。代碼示例如下:
{{'ddfe' | uppercase}}
//'ddfe'=>'DDFE'
3.lowercase
lowercase過濾器用於將表達式中的所有字母轉換為小寫形式。代碼示例如下:
{{'DDFE'} | lowercase}
//'DDFE' => 'ddfe'
2.json過濾器
Vue.js中的json過濾器本質上是JSON.stringify()的精簡縮略版，可將表達式的值轉換為JSON字符串，即輸出表達式經過JSON.stringify()處理后的結果。json可接受一個類型為Number的參數，用於決定轉換后的JSON字符串的縮進距離，如果不輸入該參數，則默認為2。代碼示例如下:
<pre>{{didiFamily | json 4}}</pre>
/*
以四個空格的縮進打印一個對象：
didiFamily:{'name':'ddfe','age':3}
=>
{
'name':'ddfe',
'age':3
}
*/
3.限制
Vue.js中內置了limitBy、filterBy、orderBy三個過濾器用於處理並返回過濾后的數組，比如與v-for搭配使用。注意，這三個過濾器所處理的表達式的值必須是數組，否則程序會報錯。
1.limitBy
limitBy過濾器的作用是限制數組為開始的前N個元素，其中N由傳入的第一個參數指定。第二個參數可選，用於指定開始的偏移量，默認為0，即不偏移。如果第二個參數為5，則表示從數組下標為5的地方開始計數。代碼示例如下:
//只顯示開始的10個元素 <div v-for="item in items | limitBy 10"></div>
2.filterBy
filterBy過濾器的使用比較靈活，其第一個參數可以是字符串或者函數。過濾條件是:'string||function'+in+'optionKeyName'。
如果第一個參數是字符串，那么將在每個數組元素中搜索它，並返回包含該字符串的元素組成的數組。代碼示例如下:
<div v-for="item in items | filterBy 'hello'"></div>
上例中，只顯示包含hello字符串的元素。
如果item是一個對象，過濾器將遞歸地在它所有的屬性中搜索。為了縮小搜索范圍，可以指定一個搜索字段。代碼示例如下：
<div v-for="member in didiFamily | filterBy 'ddfe' in 'name'"></div>
上例中，過濾器只在用戶對象的name屬性中搜索ddfe。最好始終限制搜索范圍以提高效率與性能。
3.orderBy
orderBy過濾器的作用是返回排序后的數組。過濾條件是:'string || array ||function' + 'order≥0為升序 || order<0為降序'。第一個參數可以是字符串、數組或者函數。第二個參數order可選，決定結果為升序或降序排列，默認為1，即升序排列。
若輸入參數為字符串，則可同時傳入多個字符串作為排序鍵名，字符串之間以空格分隔。代碼示例如下:
<ul>
<li v-for="user in users | orderBy 'lastName' 'firstName' 'age'">
{{user.lastName}} {{user.firstName}} {{user.age}}
</li>
</ul>
此時將按照傳入的排序鍵名的先后順序進行排序。
注：事實上，當傳入參數為字符串或者數組時，最終調用的也是sort（）函數，只不過Vue.js提前作了一些處理，比如設置了默認的compare函數等，根據傳入的compare函數進行排序。
4.currency過濾器
currency過濾器的作用是將數字值轉換為貨幣形式輸出。其第一個參數接受類型為String的貨幣符號，如果不輸入，則默認為美元符號$。第二個參數接受類型為Number的小數位，如果不輸入，則默認為2。注意，如果第一個參數采取默認形式，而需要第二個參數修改小數位，則第一個參數不可省略。代碼示例如下:
{{amount | currency}}
//12345 => $12345.00
使用其他符號，比如人民幣符號，代碼示例如下：
{{amount | currency '￥'}}
//12345 => ￥12345.00
5.debounce過濾器
debounce過濾器的作用是延遲處理器一定的時間執行。其接受的表達式的值必須為函數，因此其一般與v-on等指令結合使用。debounce接受一個可選的參數作為延遲時間，單位為毫秒。如果沒有該參數，則默認的延遲時間為300毫秒。經過debounce包裝的處理器在調用之后將至少延遲設定的時間再執行。如果在延遲結束前再次調用，則延遲時長將重置為設定的時間。通常，在監聽用戶input事件時使用debounce過濾器比較有用，可以防止頻繁調用方法，debounce的用法參考如下:
<input @keyup="onKeyup | debounce 500">
二、自定義過濾器
大多數情況下，Vue.js中內置的過濾器並不能滿足我們的需求，好在Vue.js還提供了自定義過濾器的API供用戶進行功能擴展。
1.filter語法
在Vue.js中也存在一個全局函數Vue.filter用於構造過濾器：
Vue.filter(ID,function(){})
該函數接受兩個參數，其中第一個參數為過濾器ID，作為用戶自定義過濾器的唯一標識；第二個參數則為具體的過濾器函數。過濾器函數以值為參數，返回轉換后的值。
1.單個參數
注冊一個名為reverse的過濾器，作用是將字符串反轉輸出。代碼示例如下:
Vue.filter('reverse',function(value){
return value.split('').reverse().join('');
})
<span v-text="message | reverse"></span>
//'abc' => 'cba'
2.多參數
過濾器函數除了以值為參數外，還支持接受任意數量的參數，參數之間以空格分隔。代碼示例如下:
Vue.filter('wrap',function(value,begin,end){
return begin + value +end
})
<span v-text="message | wrap 'before' 'after'"></span>
//'hello' => 'before hello after'
3.雙向過濾器
上面的過濾器函數都是在Model數據輸出到View層之前進行數據轉化的，實際上Vue.js還支持把來自視圖（input元素）的值在寫回模型前進行轉化，即雙向過濾器。代碼如下
Vue.filter(id,{ //model -> view //read 函數可選 read:function(val){}, //view -> model //write函數將在數據被寫入Model之前調用 //兩個參數分別為表達式的新值和舊值 write:function(newVal,oldVal){} })
4.動態參數
filter語法還有一個需要注意的點：動態參數。如果過濾器參數沒有用引號包起來，則它會在當前vm作用域內動態計算。此外，過濾器函數的this始終指向調用它的vm。