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 自訂資料呈現格式 這篇筆記的介紹。

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