vue全局實現數字千位分隔符格式

Posted on by

本文實例為大傢分享瞭vue全局實現數字千位分隔符格式的具體代碼，供大傢參考，具體內容如下

這個是啥意思呢 ？ 就是我們在頁面上需要渲染數據的時候，比如 88888，我們需要按照千分位顯示成方便閱讀的格式88,888。

這個時候我的做法是vue寫一個過濾器，將所有的數據都用這個過濾器過濾一下。

因為涉及的數據相對比較多，我就將這個過濾器掛載到瞭全局，這樣就不用再每個頁面引用瞭。

轉換代碼實現

首先創建一個文件 numberToCurrency.js ，實現數字千位分隔符轉換功能。

export function numberToCurrencyNo(value) {
  if (!value) return 0
  // 獲取整數部分
  const intPart = Math.trunc(value)
  // 整數部分處理，增加,
  const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  // 預定義小數部分
  let floatPart = ''
  // 將數值截取為小數部分和整數部分
  const valueArray = value.toString().split('.')
  if (valueArray.length === 2) { // 有小數部分
    floatPart = valueArray[1].toString() // 取得小數部分
    return intPartFormat + '.' + floatPart
  }
  return intPartFormat + floatPart
}

好瞭，這樣就實現瞭，當然如果有其他的需求，具體的轉換代碼得根據實際來修改。

接下來就是引用。

引用掛載全局

在 main.js 文件中引入剛才的過濾器文件，並且掛載到全局。

import { numberToCurrencyNo } from '@/utils/numberToCurrency'
// 配置全局過濾器，實現數字千分位格式
Vue.filter('numberToCurrency', numberToCurrencyNo)

這樣子就可以瞭，然後在具體需要轉換的地方使用一下就OK瞭。

使用

使用的話就是普通過濾器的使用方法。

<p class="num color1">{{riskAll| numberToCurrency}}</p>

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：