vue實(shí)現(xiàn)數(shù)字加逗號(hào)分隔
更新時(shí)間：2024年10月16日 09:16:12 作者：Juliet_xmj
在Vue項(xiàng)目中,對(duì)數(shù)字進(jìn)行格式化,實(shí)現(xiàn)帶小數(shù)的數(shù)字三位一分隔的效果,可以通過(guò)自定義過(guò)濾器來(lái)實(shí)現(xiàn),使用JavaScript的toLocaleString方法可以方便地將數(shù)字轉(zhuǎn)換成帶逗號(hào)的格式
vue數(shù)字加逗號(hào)分隔
帶小數(shù)的數(shù)字三位一分隔
filters: {
num: (val, fix = 2) => {
if (val !== 0) {
val = Number(val) // 字符串轉(zhuǎn)為數(shù)字，目標(biāo)數(shù)據(jù)為數(shù)字可不轉(zhuǎn)
val = '' + val.toFixed(2) // 保留兩位小數(shù)并轉(zhuǎn)為字符串
let int = val.slice(0, fix * -1 - 1) // 獲取整數(shù)
let ext = val.slice(fix * -1 - 1) // 獲取到小數(shù)
int = int.split('').reverse().join('') // 翻轉(zhuǎn)整數(shù)
let temp = '' // 臨時(shí)變量
for (let i = 0; i < int.length; i++) {
temp += int[i]
if ((i + 1) % 3 === 0 && i !== int.length - 1) {
temp += ',' // 每隔3個(gè)數(shù)字拼接一個(gè)逗號(hào)
}
}
temp = temp.split('').reverse().join('') // 加完逗號(hào)之后翻轉(zhuǎn)
temp = temp + ext // 整數(shù)小數(shù)拼接
return temp // 返回
} else {
return val
}
}
}整數(shù)三位一分隔
filters: {
num: (val) => {
val = '' + val // 轉(zhuǎn)換成字符串
let int = val
int = int.split('').reverse().join('') // 翻轉(zhuǎn)整數(shù)
let temp = '' // 臨時(shí)變量
for (let i = 0; i < int.length; i++) {
temp += int[i]
if ((i + 1) % 3 === 0 && i !== int.length - 1) {
temp += ',' // 每隔三個(gè)數(shù)字拼接一個(gè)逗號(hào)
}
}
temp = temp.split('').reverse().join('') // 加完逗號(hào)之后翻轉(zhuǎn)
return temp // 返回
}
}使用
{{name | num}}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在前后端分離架構(gòu)中,vue項(xiàng)目通常需要部署到nginx服務(wù)器以實(shí)現(xiàn)生產(chǎn)環(huán)境運(yùn)行,這篇文章主要介紹了Nginx部署前端Vue項(xiàng)目的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-05-05
uni-app是一款基于Vue.js的跨平臺(tái)開發(fā)框架，它借助了 Vue.js 的語(yǔ)法和組件化開發(fā)思想，本文將詳細(xì)介紹 uni-app 的全局配置、靜態(tài)資源管理、路由管理以及數(shù)據(jù)通信和狀態(tài)管理的進(jìn)階使用技巧,需要的朋友可以參考下2023-06-06
關(guān)于Vue?ui?的沒(méi)反應(yīng)、報(bào)錯(cuò)問(wèn)題解決總結(jié)
這篇文章主要介紹了關(guān)于Vue?ui?的沒(méi)反應(yīng)、報(bào)錯(cuò)問(wèn)題解決總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue父子組件方法this.$emit()有時(shí)候不觸發(fā)問(wèn)題及解決
這篇文章主要介紹了Vue父子組件方法this.$emit()有時(shí)候不觸發(fā)問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue?入口與?initGlobalAPI實(shí)例剖析
這篇文章主要為大家介紹了Vue?入口與?initGlobalAPI實(shí)例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法
這篇文章主要介紹了vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法，本文圖文并茂給大家介紹的非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
vue3+Element采用遞歸調(diào)用封裝導(dǎo)航欄實(shí)現(xiàn)
本文主要介紹了vue3+Element采用遞歸調(diào)用封裝導(dǎo)航欄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
詳解Vue微信授權(quán)登錄前后端分離較為優(yōu)雅的解決方案
這篇文章主要介紹了詳解Vue微信授權(quán)登錄前后端分離較為優(yōu)雅的解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue在.js文件中引入store和router問(wèn)題
這篇文章主要介紹了vue在.js文件中引入store和router問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue+webrtc(騰訊云) 實(shí)現(xiàn)直播功能的實(shí)踐
本文主要介紹了vue+webrtc(騰訊云) 實(shí)現(xiàn)直播功能的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11