js中使用

js程式碼

const digitsRE = /(\d{3})(?=\d)/g

function currency (value, currency, decimals) {
  value = parseFloat(value)
  if (!isFinite(value) || (!value && value !== 0)) return ''
  currency = currency != null ? currency : '$'
  decimals = decimals != null ? decimals : 2
  var stringified = Math.abs(value
 
).toFixed(decimals)
  var _int = decimals
    ? stringified.slice(0, -1 - decimals)
    : stringified
  var i = _int.length % 3
  var head = i > 0
    ? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
    : ''
  var _float = decimals
    ? stringified.slice(-1 - decimals)
    : ''
  var sign = value
 
 < 0 ? '-' : ''
  return sign + currency + head +
    _int.slice(i).replace(digitsRE, '$1,') +
    _float
}

使用方法：將 1000000 轉換為 $1,000,000.000

currency(1000000,'$',3)  //$1,000,000.000

vue中實現

建立 currency.js 檔案，比之前的js程式碼多了一個 export

const digitsRE = /(\d{3})(?=\d)/g

export function currency (value, currency, decimals) {
  value
 
 = parseFloat(value)
  if (!isFinite(value) || (!value && value !== 0)) return ''
  currency = currency != null ? currency : '$'
  decimals = decimals != null ? decimals : 2
  var stringified = Math.abs(value).toFixed(decimals)
  var _int = decimals
    ? stringified.slice(0, -1 - decimals)
    : stringified
  var i = _int.length % 3
  var head = i > 0
    ? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
    : ''
  var _float = decimals
    ? stringified.slice(-1 - decimals)
    : ''
  var sign = value < 0 ? '-' : ''
  return sign + currency + head +
    _int.slice(i).replace(digitsRE, '$1,') +
    _float
}

區域性實現方式

引入 currency.js 檔案

在要使用的元件中 import
import { currency } from './../util/currency' 
由於 函式currency 是通過 export 匯出的，所以這裡的 currency 必須使用 {} 包起來；
這裡的 ./../util/currency 根據專案實際情況填寫 currency.js 對應的路徑

將 currency 加入到 filters

filters:{
    currency: currency
}

在vue元件中使用

{{ totalPrice | currency('$') }}

最終顯示的結果

全域性過濾器

找到我們的入口檔案 main.js

在 main.js 中引入 currency.js 檔案

在要使用的元件中 import
import { currency } from './util/currency' 
由於 函式currency 是通過 export 匯出的，所以這裡的 currency 必須使用 {} 包起來；
這裡的 ./util/currency 根據專案實際情況填寫 currency.js 對應的路徑

在 main.js 中加入filter過濾器中

Vue.filter("currency",currency);

在vue元件中使用

{{ totalPrice | currency('$') }}

最終顯示的結果

成長路上的一些知識分享，如有錯誤，歡迎指正批評！O(∩_∩)O