Vue.js（三）—— vue.js中自定義過濾器filters

目錄

1. 基礎語法

2. 多個過濾器串聯

3. 單個過濾器接收多個參數

---

vue.js 中允許自定義過濾器，用於常見文本的格式化；

過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式 (表達式用法從 2.1.0+ 開始支持)。

1. 基礎語法

將過濾器添加在 JavaScript 表達式的尾部，由“管道”符號指示：

<template>
    <div class='app-container'>
        <h2>{{time | timeFormat}}</h2>
        <p :class="status | styleFormat">狀態<p>
    </div>
</template>

<script>
export default {
  data() {
    return {
      time: 1534502396,
      status: 1
    };
  },
  filters: {
    timeFormat(val) {
      let date = new Date(val * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      m = m >= 10 ? m : "0" + m;
      d = d >= 10 ? d : "0" + d;
      return y + "-" + m + "-" + d;
    },
    styleFormat(val){
      let cls = '';
      val == 1 ? cls = 'colorRed' : cls='colorGreen';
      return cls;
  }
};
</script>

2. 多個過濾器串聯

多個過濾器串聯時，會將前一個過濾器的結果作爲參數傳給下一個過濾器。

<template>
    <h2>{{num | formatA | formatB}}</h2>
</template>
<script>
export default {
  data() {
    return {
      num: 100
    };
  },
  filters: {
    formatA(val) {
      if (val < 60) {
        return 0.4 * val + 100;
      } else {
        return (1.25 * val + 0.4 * 60) / 3;
      }
    },
    formatB(val){
        return val.toFixed(2);
    }
  }
};
</script>

在執行過程中，會將num作爲參數傳入過濾器formatA，執行得到結果49.666666666666664，然後將此結果傳給過濾器formatB，得到最終結果49.67 。

3. 單個過濾器接收多個參數

有的時候，我們想通過多個參數進行判斷，得到我們想要的結果；此時，就可以給過濾器函數傳入參數，注意，過濾器的第一個參數永遠都是分割線前面的內容，我們傳入的參數實際上是從第二個參數開始的。

如下示例中： 過濾器 format() 的第一個參數 t 對應的爲分隔符前面的 type，而我們傳入的第一個參數 dis 實際對應過濾器中的第二個參數 d ，以此類推。

<template>
    <h2 :class="type | format(discount, limit)"></h2>
</template>
<script>
export default {
  data() {
    return {
      type: 1,
      discount: 2,
      limit: 2
    };
  },
  filters: {
    format(t, d, l) {
      if (t == 1 && d == l) {
          return 'freePay'
      } else if (t == 1 && d < l) {
          return 'discountPay'
      } else {
          return 'discountRec'
      }
    }
  }
};
</script>

4. Tips：

過濾器應當用於處理簡單的文本轉換，如格式化日期，字母全部大寫，金額每隔千位要加分隔符等；如果要實現更爲複雜的數據變換，應當使用計算屬性。