vue全局實現(xiàn)數(shù)字千位分隔符格式
更新時間：2021年10月27日 09:04:00 作者：秦浩鋮
這篇文章主要為大家詳細(xì)介紹了vue全局實現(xiàn)數(shù)字千位分隔符格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue全局實現(xiàn)數(shù)字千位分隔符格式的具體代碼，供大家參考，具體內(nèi)容如下
這個是啥意思呢 ？ 就是我們在頁面上需要渲染數(shù)據(jù)的時候，比如 88888，我們需要按照千分位顯示成方便閱讀的格式88,888。
這個時候我的做法是vue寫一個過濾器，將所有的數(shù)據(jù)都用這個過濾器過濾一下。
因為涉及的數(shù)據(jù)相對比較多，我就將這個過濾器掛載到了全局，這樣就不用再每個頁面引用了。
轉(zhuǎn)換代碼實現(xiàn)
首先創(chuàng)建一個文件 numberToCurrency.js ，實現(xiàn)數(shù)字千位分隔符轉(zhuǎn)換功能。
export function numberToCurrencyNo(value) {
if (!value) return 0
// 獲取整數(shù)部分
const intPart = Math.trunc(value)
// 整數(shù)部分處理，增加,
const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
// 預(yù)定義小數(shù)部分
let floatPart = ''
// 將數(shù)值截取為小數(shù)部分和整數(shù)部分
const valueArray = value.toString().split('.')
if (valueArray.length === 2) { // 有小數(shù)部分
floatPart = valueArray[1].toString() // 取得小數(shù)部分
return intPartFormat + '.' + floatPart
}
return intPartFormat + floatPart
}
好了，這樣就實現(xiàn)了，當(dāng)然如果有其他的需求，具體的轉(zhuǎn)換代碼得根據(jù)實際來修改。
接下來就是引用。
引用掛載全局
在 main.js 文件中引入剛才的過濾器文件，并且掛載到全局。
import { numberToCurrencyNo } from '@/utils/numberToCurrency'
// 配置全局過濾器，實現(xiàn)數(shù)字千分位格式
Vue.filter('numberToCurrency', numberToCurrencyNo)
這樣子就可以了，然后在具體需要轉(zhuǎn)換的地方使用一下就OK了。
使用
使用的話就是普通過濾器的使用方法。
<p class="num color1">{{riskAll| numberToCurrency}}</p>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中關(guān)于confirm確認(rèn)框的用法
這篇文章主要介紹了vue中關(guān)于confirm確認(rèn)框的用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
Pinia?是?Vue.js?的輕量級狀態(tài)管理庫,最近很受歡迎,它使用?Vue?3?中的新反應(yīng)系統(tǒng)來構(gòu)建一個直觀且完全類型化的狀態(tài)管理庫,下面就跟隨小編一起來學(xué)習(xí)一下它的具體使用吧2023-10-10
這篇文章主要介紹了Vue的自定義事件之組件通信工具詳解,Vue的自定義事件(Custom Events)是一種強大的工具,用于實現(xiàn)組件之間的通信和數(shù)據(jù)傳遞,本文將深入探討什么是Vue的自定義事件,以及如何自定義和使用它們,需要的朋友可以參考下2023-10-10
本文主要介紹了vuex刷新頁面丟失登錄token信息的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
elementUI樣式修改未生效問題詳解(掛載到了body標(biāo)簽上)
vue+elementUI項目開發(fā)中,經(jīng)常遇到修改elementUI組件樣式無效的問題,這篇文章主要給大家介紹了關(guān)于elementUI樣式修改未生效問題的相關(guān)資料,掛載到了body標(biāo)簽上,需要的朋友可以參考下2023-04-04
使用vuex的時候,出現(xiàn)this.$store為undefined問題
這篇文章主要介紹了使用vuex的時候,出現(xiàn)this.$store為undefined問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
詳解解決使用axios發(fā)送json后臺接收不到的問題
這篇文章主要介紹了詳解解決使用axios發(fā)送json后臺接收不到的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。路由實際上就是可以理解為指向，就是我在頁面上點擊一個按鈕需要跳轉(zhuǎn)到對應(yīng)的頁面，這就是路由跳轉(zhuǎn)2023-01-01
vue中for循環(huán)更改數(shù)據(jù)的實例代碼(數(shù)據(jù)變化但頁面數(shù)據(jù)未變）
這篇文章主要介紹了vue中for循環(huán)更改數(shù)據(jù)的實例代碼(數(shù)據(jù)變化但頁面數(shù)據(jù)未變）的相關(guān)資料,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了Vue3響應(yīng)式核心之effect的相關(guān)知識，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue3有一定的幫助，需要的可以參考一下2023-04-04