記念即將逝去的Vue過濾器

在這個教程中，咱們將會經過幾個例子，瞭解和學習VueJs的過濾器。咱們參考了一些比較完善的過濾器，好比orderBy 和 filterBy。並且咱們能夠鏈式調用過濾器，一個接一個過濾。所以，咱們能夠定義咱們本身的過濾器在咱們的Vue實例中。

閱讀這個教程的前提是你對Vue已經有了基本的語法基礎。

VueJs中的過濾器基礎

過濾器是一個經過輸入數據，可以及時對數據進行處理並返回一個數據結果的簡單函數。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引發來前端一波熱烈的討論。從尤大的github上看到了2.0和1.0的區別

Vue2.0想要把filter去掉。不過我想，若是是用1.0的朋友仍是很須要用到過濾器的 : )

github地址
https://github.com/AppianZ/Close2Vue