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)文章
本篇文章主要介紹了詳解Vue方法與事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
作為使用Vue的開(kāi)發(fā)者，我們對(duì)Vue指令一定不陌生，諸如v-model、v-on、v-for、v-if等，同時(shí)Vue也為開(kāi)發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫(xiě)代碼的效率，讓我們可以節(jié)省時(shí)間開(kāi)心的摸魚(yú)2022-11-11
Vue input輸入框回車(chē)以后自動(dòng)刷新頁(yè)面(直播程序)
這篇文章主要介紹了直播程序，Vue input輸入框回車(chē)以后自動(dòng)刷新頁(yè)面,適用場(chǎng)景是在輸入框輸入字符并按下回車(chē)鍵搜索時(shí)，刷新頁(yè)面，需要的朋友參考下實(shí)現(xiàn)代碼2023-01-01
使用 Vue cli 3.0 構(gòu)建自定義組件庫(kù)的方法
本文旨在給大家提供一種構(gòu)建一個(gè)完整 UI 庫(kù)腳手架的思路。通過(guò)實(shí)例代碼給大家講解了使用 Vue cli 3.0 構(gòu)建自定義組件庫(kù)的方法，感興趣的朋友跟隨小編一起看看吧2019-04-04
vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息
這篇文章主要介紹了vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息,項(xiàng)目結(jié)合vue腳手架和websocket來(lái)搭建，本文給大家分享實(shí)例代碼，需要的朋友可以參考下2019-12-12
vue子組件通過(guò).sync修飾符修改props屬性方式
這篇文章主要介紹了vue子組件通過(guò).sync修飾符修改props屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vux是Vue.js的一個(gè)ui庫(kù)，官網(wǎng)在這里，官方文檔的配置指南側(cè)重于技術(shù)的羅列，我這里簡(jiǎn)化一下Vux的配置流程。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2017-12-12
解決vue $http的get和post請(qǐng)求跨域問(wèn)題
這篇文章主要介紹了解決vue $http的get和post請(qǐng)求跨域問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
這篇文章主要介紹了Vue源碼學(xué)習(xí)之雙向綁定，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue 清空input標(biāo)簽 中file的值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07