Vue.js - Filter 過濾器 | Lilybon's Blog

如何使用Filter

可以在v-bind表達式跟雙括號插值中使用。
(因為blog不支援雙括號故改由${}代替)

<div class="commodity-card">
    <div class="commodity-card__id" :id="rawId | formatId"></div>
    <div class="commodity-card__price">${ rawPrice | formatTriangle }</div>
</div>

如何註冊Filter

以下兩種方法提供Vue.js的使用者自行設定Filter的函式，我以vue-cli的架構做簡單的範例。

全域註冊Filter

在Vue實例化之前註冊自訂義的filter，但要小心不要跟組件局部註冊之filter同名。

// app.js
Vue.filter('formatTriangle', (val) => {
    if(val > 0) val = '▲' + val;
    else if(val < 0) val = '▼' + val;
    return val;
});

局部註冊Filter

在component內部的filters區塊加入函式。

export default() {
    delimiters: ['${', '}'],
    data() {
      return {
          rawPrice: 2568000
      }
    },
    filters: {
        formatTriangle: function(val) {
            if(val > 0) val = '▲' + val;
            else if(val < 0) val = '▼' + val;
            return val;
        }
    }
}

Filter串聯

filter亦具有先後順序性可被串聯，前一個結果的回傳值將被代到下一個filter作處理。

${ message | filterA | filterB }

Filter代參數

filter可以代參數，可在filter函式第一個參數後自訂義多個參數。

<div class="customer-service">
    <div class="customer-service__message">${ message | customMessage(clientName, agentName) }</div>
</div>

Vue.filter('customMessage', (val, client, agent) => {
    return `Dear ${ client }, ${ val } Sincerely, ${ agent }`;
});

Method、Computed、Filter之間的差異

method主要用來觸發狀態的改變，意味著可能會進階影響computed或filter，且data只要一變動都會導致瀏覽器上有用到method渲染的部分重繪，在渲染上的效能computed會相較method好。
computed在data變動時只會在涉及跟自己有關的變數改變時才會發生重繪，較適合複雜的資料處理和轉換e.g.渲染動態時間條。
若有很多組件都會用到需要處理字串格式化的部分，filter會比computed來得方便(但也可以考慮業務邏輯的複雜度用mixin來複製computed)，兩者均不應觸發狀態的改變，而是專心在變數的輸入輸出上，普遍上來說filter處理的邏輯相對比起computed簡單許多。