VueJs 自定義過濾器使用總結

在這個教程中，我們將會通過幾個例子，瞭解和學習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好像把它去掉了。不過我想，如果是用1.0的朋友還是很需要用到過濾器的 : )