Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

Vue.js 使用 Filter 自訂資料呈現格式

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

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