Vue 提供的 Filter 過濾器可用於自訂畫面資料的呈現格式，如果不是做複雜的資料處理，只是做簡單調整的話，就很適合使用 Filter。

關於 Filter 與 Computed

Filter 與 Computed 有點類似，它們都可以用來做資料處理。
不過 Filter 適合用於文字、數值格式的簡單處理，像是加上千分號、錢字號等等。
Computed 則適合用於複雜的資料處理。

如何使用 Filter

STEP 1：在 Mustache 加上 Filter

我們常在 Mustache 雙大括號裡使用 Filter 過濾器，使用方法是在數值後面加上一個直槓 | 再加上 Filter 的名稱。

1<script type="text/x-template" id="row-component">
2  <tr>
3    <td>{{ item.icash | currency }}</td>
4  </tr>
5</script>
6

接下來我們就去定義 Filter 如何執行吧。

STEP 2：定義元件內 Filter 物件的方法

範例：為數值加上千分號與兩位小數點。

Function 裡面有傳入一個值 n，這個 n 就是前面的那個 item.icash，我們透過貨幣轉換的運算，把 n 加上千分號與兩位小數點。

1var child = {
2  // ...
3  // 定義 Filter 的方法
4  filters: {
5    currency: function (n) {
6      return n.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
7    },
8  },
9  // ...
10};
11

STEP 3：加上多種 Filter

如果覺得加上千分號與小數點還不夠看，想再加上一個 $ 字號，可以用 Filter 再幫我們加上去。

我們在 Filter 裡加一個 dollarSign 的 Function。

1var child = {
2  // ...
3  filters: {
4    dollarSign: function (n) {
5      return `$ ${n}`; // ES6 寫法
6    },
7    currency: function (n) {
8      return n.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
9    },
10  },
11  // ...
12};
13

要特別注意 Filter 傳入參數的順序是「由前往後」的。

範例中 item.icash 就是傳入 currency 中當作傳入參數 n 的值。

而 item.icash | currency 完成後的結果，會再被當作另一個參數 n 傳進 dollarSign 函式中。

1<script type="text/x-template" id="row-component">
2  <tr>
3    <td>{{ item.name }}</td>
4    <td>{{ item.cash | currency | dollarSign }}</td>
5    <td>{{ item.icash | currency | dollarSign }}</td>
6  </tr>
7</script>
8

STEP 4：全域註冊 Filter 在外層也能使用

剛才都是在元件內層的模板上使用 Filter，如果也想在外層元件中使用，像是其他元件或是整個 Vue 應用程式，我們該如何做呢？

1<div id="app">
2  <!-- 元件的外層也想加上格式 -->
3  {{ data[1].cash | currency | dollarSign }}
4</div>
5

其實我們剛才都是使用「局部註冊」，如果想要在全部的環境下都能使用 Filter 的話，就要改為「全域註冊」。

Filter 的全域註冊，其實就只是將元件內的函式，移到全域去做註冊。

範例：

1Vue.filter('dollarSign', function (n) {
2  return `$ ${n}`;
3});
4
5Vue.filter('currency', function (n) {
6  return n.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
7});
8

完成全域註冊之後，原本元件內的 Filter 函式就能刪掉哩。

1var child = {
2  props: ['item'],
3  template: '#row-component',
4  data: function () {
5    return {
6      data: {},
7    };
8  },
9  // 已經改成全域註冊了，因此以下可以刪掉囉
10  // filters: {
11  //     ...
12  // },
13  mounted: function () {
14    console.log('Component:', this);
15  },
16};
17

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫