vue實(shí)現(xiàn)數(shù)字加逗號分隔
更新時(shí)間:2024年10月16日 09:16:12 作者:Juliet_xmj
在Vue項(xiàng)目中,對數(shù)字進(jìn)行格式化,實(shí)現(xiàn)帶小數(shù)的數(shù)字三位一分隔的效果,可以通過自定義過濾器來實(shí)現(xiàn),使用JavaScript的toLocaleString方法可以方便地將數(shù)字轉(zhuǎn)換成帶逗號的格式
vue數(shù)字加逗號分隔
帶小數(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è)逗號 } } temp = temp.split('').reverse().join('') // 加完逗號之后翻轉(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è)逗號 } } temp = temp.split('').reverse().join('') // 加完逗號之后翻轉(zhuǎn) return temp // 返回 } }
使用
{{name | num}}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用 Vue cli 3.0 構(gòu)建自定義組件庫的方法
本文旨在給大家提供一種構(gòu)建一個(gè)完整 UI 庫腳手架的思路。通過實(shí)例代碼給大家講解了使用 Vue cli 3.0 構(gòu)建自定義組件庫的方法,感興趣的朋友跟隨小編一起看看吧2019-04-04vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息
這篇文章主要介紹了vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息,項(xiàng)目結(jié)合vue腳手架和websocket來搭建,本文給大家分享實(shí)例代碼,需要的朋友可以參考下2019-12-12