如何使用 Filter 過濾器套用金額格式
目標:對數字做處理,將純數值轉為前方帶有錢字號 ($),且以逗號作為千分位記號的金額格式。
STEP 1:千分號 & 錢字號
首先我們新增一個 currency.js 檔案,把套用千分號與錢字號的 Code 寫在這,再到 main.js 中全域啟用它。
由於這個功能在許多元件中都還會用到,所以這裡不是將 JavaScript 寫在單一個元件的 filters
內,而是透過全域使用的方式,讓我們不用在每個需要用到 filters
的元件內,都得寫一次 filters
方法。
currency.js
可以使用正規表示式來達成這樣的標示。
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 的判斷來轉換格式。
import currencyFilter from './filters/currency';
Vue.filter('currency', currencyFilter); // 全域啟用
STEP 2:加上 Filter 過濾器
準備好金額格式轉換的 Code 後,就可以在元件的 <template>
中直接使用直槓 (|
) 來加上 Filter 過濾器了。
Filter 的使用概念就是直槓 (|
) 前方的變數 (item.price
) 會被當作參數,傳到後方的 Filter 過濾器 (currency
) 中使用。
同理,如果有多個 Filter,則前方 Filter 過濾後的整個變數會再被當作參數,傳到後面做第二次過濾。
Products.vue
<td class="text-right">{{ item.origin_price | currency}}</td>
<td class="text-right">{{ item.price | currency}}</td>
另外,更多關於錢字號的 JavaScript 邏輯與 Filter 的概念,也可以再看看 Vue.js 初心者筆記:使用 Filter 自訂資料呈現格式 這篇筆記的介紹。
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫