Vue.js: Filter 過濾器

Vue.js 提供 Filter(過濾器)處理格式化文字等狀況,若非資料處理,只是呈現上的簡易調整,就很適合使用 Filter。

如何使用 Filter 過濾器?

Mustache 模版插植

如下例,將價格 price 加上千分位符號與 $ 字號。可使用「|」(pipe)聯集多個 Filter,要注意順序,愈靠左愈先執行。

Demo

Vue.js: Filter 過濾器

程式碼

<div id="app">
  <div>${ price | commaFormat | priceFormat }</div>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    price: 9999999
  },
  Filters: {
    priceFormat: function(value) { // 加上 $ 字號
      return '$' + value
    },
    commaFormat: function(value) { // 加上千分位符號
      return value.toString().replace(/^(-?\d+?)((?:\d{3})+)(?=\.\d+$|$)/, function (all, pre, groupOf3Digital) {
        return pre + groupOf3Digital.replace(/\d{3}/g, ',$&');
      })
    }
  }
});

// 由於部落格會把使用雙花括號的內容吃掉,所以設定 delimiters 以顯示完整程式碼。

備註:這裡的 Filter 是局部註冊。

注意 Filter 的設定順序。如下所示,若先執行 priceFormat 再執行 commaFormat,就會轉失敗。

Demo

Vue.js: Filter 過濾器 - 注意 Filter 的設定順序

程式碼

<div id="app">
  <div>${ price | priceFormat | commaFormat }</div>
</div>

v-bind屬性綁定

將 Filter 用於屬性上。

Demo

Vue.js: Filter 過濾器 - v-bind 屬性綁定

程式碼

<div id="app">
  <div :data-price="price | commaFormat | priceFormat"></div>
</div>

傳入參數

Filter 是函數,可傳入參數。第一個參數是表達式(這裡是 msg),之後才是 Filter 代入的參數(「Peter」對應「arg1」,「Hello World!」對應「arg2」)。

Demo

Vue.js: Filter 過濾器 - 傳入參數

程式碼

<div id="app">
  <div>${ msg | prompt('Peter', 'Hello World!') }</div>
</div>
Vue.Filter('prompt', function (value, arg1, arg2) {
  return value + ' ' + arg1 + ', ' + arg2
})

備註:這裡的 Filter 是全域註冊。

比較 Filter 和 Computed

Filter 適於文字格式處理等簡單的狀況,而較複雜的資料處理則適合使用 Computed。

資料來源


comments powered by Disqus