vue實現(xiàn)數(shù)字加逗號分隔
更新時間：2024年10月16日 09:16:12 作者：Juliet_xmj
在Vue項目中,對數(shù)字進行格式化,實現(xiàn)帶小數(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ù)字，目標數(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 = '' // 臨時變量
for (let i = 0; i < int.length; i++) {
temp += int[i]
if ((i + 1) % 3 === 0 && i !== int.length - 1) {
temp += ',' // 每隔3個數(shù)字拼接一個逗號
}
}
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 = '' // 臨時變量
for (let i = 0; i < int.length; i++) {
temp += int[i]
if ((i + 1) % 3 === 0 && i !== int.length - 1) {
temp += ',' // 每隔三個數(shù)字拼接一個逗號
}
}
temp = temp.split('').reverse().join('') // 加完逗號之后翻轉(zhuǎn)
return temp // 返回
}
}使用
{{name | num}}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了詳解Vue方法與事件。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
作為使用Vue的開發(fā)者，我們對Vue指令一定不陌生，諸如v-model、v-on、v-for、v-if等，同時Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時間開心的摸魚2022-11-11
這篇文章主要介紹了直播程序，Vue input輸入框回車以后自動刷新頁面,適用場景是在輸入框輸入字符并按下回車鍵搜索時，刷新頁面，需要的朋友參考下實現(xiàn)代碼2023-01-01
使用 Vue cli 3.0 構(gòu)建自定義組件庫的方法
本文旨在給大家提供一種構(gòu)建一個完整 UI 庫腳手架的思路。通過實例代碼給大家講解了使用 Vue cli 3.0 構(gòu)建自定義組件庫的方法，感興趣的朋友跟隨小編一起看看吧2019-04-04
vue 實現(xiàn)websocket發(fā)送消息并實時接收消息
這篇文章主要介紹了vue 實現(xiàn)websocket發(fā)送消息并實時接收消息,項目結(jié)合vue腳手架和websocket來搭建，本文給大家分享實例代碼，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue子組件通過.sync修飾符修改props屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vux是Vue.js的一個ui庫，官網(wǎng)在這里，官方文檔的配置指南側(cè)重于技術(shù)的羅列，我這里簡化一下Vux的配置流程。感興趣的朋友跟隨腳本之家小編一起學習吧2017-12-12
這篇文章主要介紹了解決vue $http的get和post請求跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
這篇文章主要介紹了Vue源碼學習之雙向綁定，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue 清空input標簽 中file的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07