Filters

Vue.js 允許自定義過濾器，過濾器分為本地和全域。
使用方法分為兩種：

• 模板運算後方加上管道符號|

{{ value | filterName }}

• v-bind 表達式

<div v-bind:id="value | filterName"></div>

Local filters

你可以在 Vue Instance 中定義本地過濾器：

附上 fiddle (https://jsfiddle.net/hunterliu/1q4g5bmu/1/)

<div id="app">
  <p>{{ price | filterDollarSign }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    price: 199999
  },
  filters: {
    filterDollarSign(price) {
      return '$' + price;
    }
  }
})

Global filters

改寫上面的範例為全局過濾器，寫法如下：

附上 fiddle (https://jsfiddle.net/hunterliu/zzm4b7cj/2/)

<div id="app">
  <p>{{ price | filterDollarSign }}</p>
</div>

Vue.filter('filterDollarSign', function(price) {
  return '$' + price;
});

var vm = new Vue({
  el: '#app',
  data: {
    price: 199999
  }
})

差異：

HTML 中的使用方法沒有改變，都是{{ price | filterDollarSign }}，但差別在於 Local filters 範圍僅在該 Vue Instance 中。

Filters 可以串聯：

再利用上一個Local filters的範例做修改，新增一個 filterComma。

附上 fiddle (https://jsfiddle.net/hunterliu/oyrvj961/1/)

<div id="app">
  <p>{{ price | filterComma | filterDollarSign }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    price: 199999
  },
  filters: {
    filterDollarSign(price) {
      return '$' + price;
    },
    filterComma(price) {
      return price.toLocaleString('en-US');
    }
  }
})

注意：

filter 是會受順序影響的，此處的兩個 filter (filterDollarSign, filterComma) 回傳的值皆是 String，但此處的 filterComma 無法將$199999轉成$199,999，必須先將數值199999轉成199,999再加上$，所以 filterComma 需在 filterDollarSign 之前。

Filters 可以接受參數：

附上 fiddle (https://jsfiddle.net/hunterliu/820aett3/)

這裡在 filterDollarSign 傳入了 priceStr 這個 data 作為參數 arg1，結果為在 price 前增加了一段文字敘述為The price is 。

<div id="app">
  <p>{{ price | filterComma | filterDollarSign(priceStr) }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    price: 199999,
    priceStr: 'The price is '
  },
  filters: {
    filterDollarSign(price, arg1) {
      return arg1 + '$' + price;
    },
    filterComma(price) {
      return price.toLocaleString('en-US');
    }
  }
})

比較 Filters 和 Computed

個人的理解是：

• Filters 主要用於簡單的文字格式處理，需要在應用程式中重複使用。
• Computed 適合較複雜的資料處理與轉換。
• Methods 主要用來觸法狀態的改變，可能意味著會觸發 Computed 或 Filters 重新計算。
• Filters 和 Computed 應是純粹的輸入輸出，通常不應該在此修改狀態。

讓我們在改寫上面的範例。
下面這個範例在 filters 中加入了console.log來確認 filter 在點擊 button 執行changePrice這個 method 後有被觸發。

附上 fiddle (https://jsfiddle.net/hunterliu/820aett3/1/)

<div id="app">
  <p>{{ price | filterComma | filterDollarSign(priceStr) }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    price: 199999,
    priceStr: 'The price is '
  },
  methods: {
    changePrice() {
      this.price = 999999999;
    }
  },
  filters: {
    filterDollarSign(price, arg1) {
      console.log('filterDollarSign run');
      return arg1 + '$' + price;
    },
    filterComma(price) {
      console.log('filterComma run');
      return price.toLocaleString('en-US');
    }
  }
})

參考資料

• Vue.js Filters
• Summer: Vue.js Filter 過濾器
• Method vs Computed vs Filter