前言

vue中過濾器filters的作用是什么？

過濾器是一個(gè)通過輸入數(shù)據(jù)，能夠及時(shí)對數(shù)據(jù)進(jìn)行處理并返回一個(gè)數(shù)據(jù)結(jié)果的簡單函數(shù)。Vue有很多很便利的過濾器，可以參考官方文檔。

能夠幫我們處理快速一些數(shù)據(jù)的格式----format數(shù)據(jù)格式化處理。

語法也很簡單

{{ message | Filter }}

鏈?zhǔn)竭^濾

VueJs允許你鏈?zhǔn)秸{(diào)用過濾器，簡單的來說，就是一個(gè)過濾器的輸出成為下一個(gè)過濾器的輸入，然后再次過濾。接下來，我們可以想象一個(gè)比較簡答的例子，使用了Vue的 filterBy + orderBy 過濾器來過濾所有商品products。過濾出來的產(chǎn)品是屬于電器類商品，并且按電器字母排序。

filterBy過濾器 : 過濾器的值必須是一個(gè)數(shù)組，filterBy + 過濾條件。過濾條件是：‘string || function' + in ‘optionKeyName'

orderBy過濾器 : 過濾器的值必須是一個(gè)數(shù)組，orderBy + 過濾條件。過濾條件是：‘string || array ||function' + ‘order ≥ 0 為升序 || order < 0 為降序'

接下來，我們可以看下第二個(gè)例子：我們有一個(gè)商品數(shù)組products，我們希望遍歷這個(gè)數(shù)組，并把他們打印成一張清單，這個(gè)用v-for很容易實(shí)現(xiàn)。

<li v-for="product in products"> {{ product.name | capitalize }} - {{ product.price | currency }}</li>

capitalize過濾器 : 將輸入的字符串首字母轉(zhuǎn)換成大寫字母的過濾器。currency過濾器 : 將輸入的數(shù)字轉(zhuǎn)換成現(xiàn)金的過濾器。可以跟上貨幣符號（默認(rèn)$）和保留的小數(shù)位（默認(rèn)2）。

利用上面的兩個(gè)過濾器，能夠很好的把一個(gè)json數(shù)組的商品清單格式化成通熟易懂的商品價(jià)格清單。

如果只想要電器類商品，可以在v-for上加過濾條件：

<li v-for="product in products | filterBy 'electronics' in 'category' "> {{ product.name | capitalize }} - {{ product.price | currency }}</li>

上面的例子，就是用filterBy 過濾在 'category'中含有'electronics' 關(guān)鍵字的列表，返回的列表就是只含有 'electronics' 關(guān)鍵字的列表。

如果想要多個(gè)搜索條件：

<li v-for="product in products | filterBy 'electronics' in 'category' 'name' "> {{ product.name | capitalize }} - {{ product.price | currency }}</li>

上面的例子，就是用filterBy 過濾在 'category' 和 'name' 中含有'electronics' 關(guān)鍵字的列表。

最后我們還需要將這個(gè)列表用字母進(jìn)行排序。我們可以在 filterBy 過濾器的基礎(chǔ)上，鏈?zhǔn)秸{(diào)用orderBy 過濾器。

<ul> <li v-for="product in products   | filterBy 'electronics' in 'category'   | orderBy 'name' " >  {{ product.name | capitalize }} - {{ product.price | currency }} </li></ul>