過濾器是一個通過輸入數據，能夠及時對數據進行處理並返回一個數據結果的簡單函數。Vue有很多很便利的過濾器，可以參考官方文檔， http://cn.vuejs.org/api/#過濾器 ，過濾器通常會使用管道標志 “ | ”， 比如：
{{ msg | uppercase }}
// 'abc' => 'ABC'在上述的例子中，在插值的時候，使用了Vue的一個uppercase過濾器，msg可以是直接寫死，寫成{{ ‘abc’ | uppercase }}，也可以利用用戶輸入來改變msg的值。
uppercase過濾器 : 將輸入的字符串轉換成大寫字母的過濾器。
鏈式過濾
VueJs允許你鏈式調用過濾器，簡單的來說，就是一個過濾器的輸出成為下一個過濾器的輸入，然后再次過濾。接下來，我們可以想象一個比較簡答的例子，使用了Vue的 filterBy + orderBy 過濾器來過濾所有商品products。過濾出來的產品是屬於電器類商品，並且按電器字母排序。
filterBy過濾器 : 過濾器的值必須是一個數組，filterBy + 過濾條件。過濾條件是：‘string || function’ + in ‘optionKeyName’
orderBy過濾器 : 過濾器的值必須是一個數組，orderBy + 過濾條件。過濾條件是：‘string || array ||function’ + ‘order ≥ 0 為升序 || order < 0 為降序’
接下來，我們可以看下第二個例子：我們有一個商品數組products，我們希望遍歷這個數組，並把他們打印成一張清單，這個用v-for很容易實現。
<li v-for="product in products"> {{ product.name | capitalize }} - {{ product.price | currency }} </li>capitalize過濾器 : 將輸入的字符串首字母轉換成大寫字母的過濾器。currency過濾器 : 將輸入的數字轉換成現金的過濾器。可以跟上貨幣符號（默認$）和保留的小數位（默認2）。
利用上面的兩個過濾器，能夠很好的把一個json數組的商品清單格式化成通熟易懂的商品價格清單。
如果只想要電器類商品，可以在v-for上加過濾條件：
<li v-for="product in products | filterBy 'electronics' in 'category' "> {{ product.name | capitalize }} - {{ product.price | currency }} </li>上面的例子，就是用filterBy 過濾在 'category'中含有'electronics' 關鍵字的列表，返回的列表就是只含有 'electronics' 關鍵字的列表。
如果想要多個搜索條件：
<li v-for="product in products | filterBy 'electronics' in 'category' 'name' "> {{ product.name | capitalize }} - {{ product.price | currency }} </li>上面的例子，就是用filterBy 過濾在 'category' 和 'name' 中含有'electronics' 關鍵字的列表。
最后我們還需要將這個列表用字母進行排序。我們可以在 filterBy 過濾器的基礎上，鏈式調用orderBy 過濾器。
<ul> <li v-for="product in products | filterBy 'electronics' in 'category' | orderBy 'name' " > {{ product.name | capitalize }} - {{ product.price | currency }} </li> </ul>orderBy 的排序方式默認是升序，如果想要降序，只需要加一個小於0的參數：
<li v-for="product in products | filterBy 'electronics' in 'category' | orderBy 'name' -1 " >自定義過濾器
雖然VueJs給我們提供了很多強有力的過濾器，但有時候還是不夠。值得慶幸的，Vue給我們提供了一個干凈簡潔的方式來定義我們自己的過濾器，之后我們就可以利用管道 “ | ” 來完成過濾。
定義一個全局的自定義過濾器，需要使用Vue.filter()構造器。這個構造器需要兩個參數。
Vue.filter() Constructor Parameters:
1.filterId: 過濾器ID，用來做為你的過濾器的唯一標識；
2.filter function: 過濾器函數，用一個function來接收一個參數，之后再將接收到的參數格式化為想要的數據結果。
回到之前的例子：現在設想我們有一個網上商城，並給我們的所有商品打五折。
為了完成這個例子，我們需要完成的是
-
使用Vue.filter()構造器創建一個過濾器叫做discount
-
輸入商品的原價，能夠返回其打五折之后的折扣價
Vue.filter( 'discount' , function(value) { return value * .5 ; }); new Vue({ el : 'body', data : { products : [ {name: 'microphone', price: 25, category: 'electronics'}, {name: 'laptop case', price: 15, category: 'accessories'}, {name: 'screen cleaner', price: 17, category: 'accessories'}, {name: 'laptop charger', price: 70, category: 'electronics'}, {name: 'mouse', price: 40, category: 'electronics'}, {name: 'earphones', price: 20, category: 'electronics'}, {name: 'monitor', price: 120, category: 'electronics'} ] } });現在就可以像使用Vue自帶的過濾器一樣使用自定義過濾器了
<ul> <li v-for="product in products"> {{ product.name | capitalize }} - {{ product.price | discount | currency }} </li> </ul>上面的html代碼將會輸出打了五折之后的所有商品的清單列表。
那如果我們想要的是任意折扣呢？我們應該在discount過濾器里增加一個折扣數值參數，改造一下我們的過濾器。
Vue.filter( 'discount' , function(value,discount) { return value * ( discount / 100 ) ; });然后重新調用我們的過濾器
<ul> <li v-for="product in products"> {{ product.name | capitalize }} - {{ product.price | discount 25 | currency }} </li> </ul>我們也可以在我們Vue實例里構造我們的過濾器，這樣構造的好處是，這樣就不會影響到其他不需要用到這個過濾器的Vue實例。
new Vue({ el : 'body', data : { products : [ {name: 'microphone', price: 25, category: 'electronics'}, {name: 'laptop case', price: 15, category: 'accessories'}, {name: 'screen cleaner', price: 17, category: 'accessories'}, {name: 'laptop charger', price: 70, category: 'electronics'}, {name: 'mouse', price: 40, category: 'electronics'}, {name: 'earphones', price: 20, category: 'electronics'}, {name: 'monitor', price: 120, category: 'electronics'} ] }, filters: { discount : function(value, discount){ return value * ( discount / 100 ); } } });定義在全局就能在所有的實例中調用過濾器，如果定義在了實例里就在實例里調用過濾器。
多虧了簡潔的管道過濾器構造器，我們不僅可以調用它原生的過濾器，也可以自定義屬於我們自己的過濾器。但是Vue2.0好像把它去掉了。不過我想，如果是用1.0的朋友還是很需要用到過濾器的 : )