iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
2
Modern Web

用範例理解 Vue.js系列 第 7

用範例理解 Vue.js #7:Filters vs Computed

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20171217/20107107G3mYriHlOt.png

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 #6:Computed vs Methods
下一篇
用範例理解 Vue.js #8:Watch vs Computed
系列文
用範例理解 Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言