Vue 初心者筆記 #42 Filter 過濾器

發表於 分類於

之前有介紹過使用 Vue.js 的 Filter 做資料處理，替價格加上千分位的逗號，以及錢字號 ($) 的調整。
那麼到了 Vue CLI 的環境下，我們依然可以完成這個功能，只是做法上有稍微改變，但基本上邏輯還是一樣的，總之就來實作看看吧！
另外，這也是六角學院鼠年全馬鐵人挑戰的第一篇文章，其實我應該就是看當下正在學什麼，就寫相關的筆記當作活動文章哩。

如何使用 Filter 過濾器套用金額格式

目標：對數字做處理，將純數值轉為前方帶有錢字號 ($)，且以逗號作為千分位記號的金額格式。

STEP 1：千分號 & 錢字號

首先我們新增一個 currency.js 檔案，把套用千分號與錢字號的 Code 寫在這，再到 main.js 中全域啟用它。

由於這個功能在許多元件中都還會用到，所以這裡不是將 JavaScript 寫在單一個元件的 filters 內，而是透過全域使用的方式，讓我們不用在每個需要用到 filters 的元件內，都得寫一次 filters 方法。

currency.js

可以使用正規表示式來達成這樣的標示。

1
2
3
4
5
6
7
8
9
10
export default function (num) {
  const n = Number(num);
  return `$${n.toFixed(0).replace(/./g, (c, i, a) => {
    const currency =
      i && c !== '.' && (a.length - i) % 3 === 0
        ? `, ${c}`.replace(/\s/g, '')
        : c;
    return currency;
  })}`;
}

如果不知道千分號與錢字號該如何轉換，相關的程式碼在網路上也可以找得到喔

main.js

透過 Vue.filter 做全域註冊，讓所有的 Vue 元件都可以使用 currency.js 的判斷來轉換格式。

1
2
import currencyFilter from './filters/currency';
Vue.filter('currency', currencyFilter); // 全域啟用

STEP 2：加上 Filter 過濾器

準備好金額格式轉換的 Code 後，就可以在元件的 <template> 中直接使用直槓 (|) 來加上 Filter 過濾器了。

Filter 的使用概念就是直槓 (|) 前方的變數 (item.price) 會被當作參數，傳到後方的 Filter 過濾器 (currency) 中使用。
同理，如果有多個 Filter，則前方 Filter 過濾後的整個變數會再被當作參數，傳到後面做第二次過濾。

Products.vue

1
2
<td class="text-right">{{ item.origin_price | currency}}</td>
<td class="text-right">{{ item.price | currency}}</td>

另外，更多關於錢字號的 JavaScript 邏輯與 Filter 的概念，也可以再看看 Vue.js 初心者筆記：使用 Filter 自訂資料呈現格式 這篇筆記的介紹。

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