Vue 初心者筆記 #42 Filter 過濾器
之前有介紹過使用 Vue.js 的 Filter 做資料處理,替價格加上千分位的逗號,以及錢字號 ($) 的調整。
那麼到了 Vue CLI 的環境下,我們依然可以完成這個功能,只是做法上有稍微改變,但基本上邏輯還是一樣的,總之就來實作看看吧!
另外,這也是六角學院鼠年全馬鐵人挑戰的第一篇文章,其實我應該就是看當下正在學什麼,就寫相關的筆記當作活動文章哩。
如何使用 Filter 過濾器套用金額格式
目標:對數字做處理,將純數值轉為前方帶有錢字號 ($),且以逗號作為千分位記號的金額格式。
STEP 1:千分號 & 錢字號
首先我們新增一個 currency.js 檔案,把套用千分號與錢字號的 Code 寫在這,再到 main.js 中全域啟用它。
由於這個功能在許多元件中都還會用到,所以這裡不是將 JavaScript 寫在單一個元件的 filters
內,而是透過全域使用的方式,讓我們不用在每個需要用到 filters
的元件內,都得寫一次 filters
方法。
currency.js
可以使用正規表示式來達成這樣的標示。
1 | export default function (num) { |
如果不知道千分號與錢字號該如何轉換,相關的程式碼在網路上也可以找得到喔
main.js
透過 Vue.filter
做全域註冊,讓所有的 Vue 元件都可以使用 currency.js 的判斷來轉換格式。
1 | import currencyFilter from './filters/currency'; |
STEP 2:加上 Filter 過濾器
準備好金額格式轉換的 Code 後,就可以在元件的 <template>
中直接使用直槓 (|
) 來加上 Filter 過濾器了。
Filter 的使用概念就是直槓 (|
) 前方的變數 (item.price
) 會被當作參數,傳到後方的 Filter 過濾器 (currency
) 中使用。
同理,如果有多個 Filter,則前方 Filter 過濾後的整個變數會再被當作參數,傳到後面做第二次過濾。
Products.vue
1 | <td class="text-right">{{ item.origin_price | currency}}</td> |
另外,更多關於錢字號的 JavaScript 邏輯與 Filter 的概念,也可以再看看 Vue.js 初心者筆記:使用 Filter 自訂資料呈現格式 這篇筆記的介紹。
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。