在這個教程中脐湾，我們將會通過幾個例子秤掌，了解和學習VueJs的過濾器鹰霍。我們參考了一些比較完善的過濾器，比如orderBy 和 filterBy孟岛。而且我們可以鏈式調(diào)用過濾器获黔，一個接一個過濾玷氏。因此，我們可以定義我們自己的過濾器在我們的Vue實例中盏触。
閱讀這個教程的前提是你對Vue已經(jīng)有了基本的語法基礎(chǔ)。
過濾器是一個通過輸入數(shù)據(jù)雌芽，能夠及時對數(shù)據(jù)進行處理并返回一個數(shù)據(jù)結(jié)果的簡單函數(shù)。Vue有很多很便利的過濾器淮腾，可以參考官方文檔屉佳，http://cn.vuejs.org/api/#過濾器，過濾器通常會使用管道標志 “ | ”圆凰， 比如：
{{ msg | uppercase? }}// 'abc' => 'ABC'
在上述的例子中专钉，在插值的時候累铅，使用了Vue的一個uppercase過濾器，msg可以是直接寫死回怜，寫成{{ ‘a(chǎn)bc’ | uppercase }}换薄，也可以利用用戶輸入來改變msg的值轻要。
uppercase過濾器 : 將輸入的字符串轉(zhuǎn)換成大寫字母的過濾器垦缅。
VueJs允許你鏈式調(diào)用過濾器，簡單的來說凡恍，就是一個過濾器的輸出成為下一個過濾器的輸入怔球，然后再次過濾。接下來闽巩，我們可以想象一個比較簡答的例子，使用了Vue的 filterBy + orderBy 過濾器來過濾所有商品products洼冻。過濾出來的產(chǎn)品是屬于電器類商品隅很，并且按電器字母排序。
filterBy過濾器 : 過濾器的值必須是一個數(shù)組普泡，filterBy + 過濾條件审编。過濾條件是：‘string || function’ + in ‘optionKeyName’
orderBy過濾器 : 過濾器的值必須是一個數(shù)組，orderBy + 過濾條件砰嘁。過濾條件是：‘string || array ||function’ + ‘order ≥ 0 為升序 || order < 0 為降序’
接下來矮湘，我們可以看下第二個例子：我們有一個商品數(shù)組products口糕，我們希望遍歷這個數(shù)組，并把他們打印成一張清單景描，這個用v-for很容易實現(xiàn)超棺。
{{ product.name | capitalize }} - {{ product.price | currency }}
capitalize過濾器 : 將輸入的字符串首字母轉(zhuǎn)換成大寫字母的過濾器。currency過濾器 : 將輸入的數(shù)字轉(zhuǎn)換成現(xiàn)金的過濾器件相⊙醪裕可以跟上貨幣符號（默認$）和保留的小數(shù)位（默認2）让虐。
利用上面的兩個過濾器，能夠很好的把一個json數(shù)組的商品清單格式化成通熟易懂的商品價格清單澄干。
如果只想要電器類商品，可以在v-for上加過濾條件：
{{ product.name | capitalize }} - {{ product.price | currency }}
上面的例子惧笛，就是用filterBy 過濾在 'category'中含有'electronics' 關(guān)鍵字的列表逞泄，返回的列表就是只含有 'electronics' 關(guān)鍵字的列表。
如果想要多個搜索條件：
上面的例子各谚，就是用filterBy 過濾在 'category' 和 'name' 中含有'electronics' 關(guān)鍵字的列表昌渤。
最后我們還需要將這個列表用字母進行排序憔四。我們可以在 filterBy 過濾器的基礎(chǔ)上，鏈式調(diào)用orderBy 過濾器潜支。
| filterBy 'electronics' in 'category'
| orderBy? 'name' ">{{ product.name | capitalize }} - {{ product.price | currency }}
orderBy 的排序方式默認是升序冗酿，如果想要降序裁替，只需要加一個小于0的參數(shù)：
| filterBy 'electronics' in 'category'
| orderBy? 'name'? -1 ">
雖然VueJs給我們提供了很多強有力的過濾器妓羊，但有時候還是不夠。值得慶幸的，Vue給我們提供了一個干凈簡潔的方式來定義我們自己的過濾器净刮，之后我們就可以利用管道 “ | ” 來完成過濾硅则。
定義一個全局的自定義過濾器，需要使用Vue.filter()構(gòu)造器暑认。這個構(gòu)造器需要兩個參數(shù)。
Vue.filter() Constructor Parameters:
1.filterId: 過濾器ID蘸际，用來做為你的過濾器的唯一標識粮彤；
2.filter function: 過濾器函數(shù)，用一個function來接收一個參數(shù)屿良，之后再將接收到的參數(shù)格式化為想要的數(shù)據(jù)結(jié)果尘惧。
回到之前的例子：現(xiàn)在設(shè)想我們有一個網(wǎng)上商城褥伴，并給我們的所有商品打五折漾狼。
為了完成這個例子逊躁，我們需要完成的是
使用Vue.filter()構(gòu)造器創(chuàng)建一個過濾器叫做discount
輸入商品的原價稽煤，能夠返回其打五折之后的折扣價
Vue.filter('discount', function(value) {returnvalue*.5;? });newVue({? ? ? ? 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'}? ? ? ? ? ? ? ]? ? ? ? }? });
現(xiàn)在就可以像使用Vue自帶的過濾器一樣使用自定義過濾器了
{{ product.name | capitalize }} - {{ product.price | discount | currency }}
上面的html代碼將會輸出打了五折之后的所有商品的清單列表轧简。
那如果我們想要的是任意折扣呢匾二？我們應該在discount過濾器里增加一個折扣數(shù)值參數(shù)察藐，改造一下我們的過濾器。
Vue.filter('discount', function(value,discount) {returnvalue* ( discount /100) ;? });
然后重新調(diào)用我們的過濾器
{{ product.name | capitalize }} - {{ product.price | discount 25 | currency }}
我們也可以在我們Vue實例里構(gòu)造我們的過濾器悴务，這樣構(gòu)造的好處是讯檐，這樣就不會影響到其他不需要用到這個過濾器的Vue實例别洪。
newVue({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);}}? });
定義在全局就能在所有的實例中調(diào)用過濾器特碳，如果定義在了實例里就在實例里調(diào)用過濾器晕换。
多虧了簡潔的管道過濾器構(gòu)造器，我們不僅可以調(diào)用它原生的過濾器益愈，也可以自定義屬于我們自己的過濾器夷家。但是Vue2.0好像把它去掉了库快。不過我想，如果是用1.0的朋友還是很需要用到過濾器的 : )
