vue实现数字加逗号分隔
作者：Juliet_xmj
在Vue项目中,对数字进行格式化,实现带小数的数字三位一分隔的效果,可以通过自定义过滤器来实现,使用JavaScript的toLocaleString方法可以方便地将数字转换成带逗号的格式
vue数字加逗号分隔
带小数的数字三位一分隔
filters: {
num: (val, fix = 2) => {
if (val !== 0) {
val = Number(val) // 字符串转为数字，目标数据为数字可不转
val = '' + val.toFixed(2) // 保留两位小数并转为字符串
let int = val.slice(0, fix * -1 - 1) // 获取整数
let ext = val.slice(fix * -1 - 1) // 获取到小数
int = int.split('').reverse().join('') // 翻转整数
let temp = '' // 临时变量
for (let i = 0; i < int.length; i++) {
temp += int[i]
if ((i + 1) % 3 === 0 && i !== int.length - 1) {
temp += ',' // 每隔3个数字拼接一个逗号
}
}
temp = temp.split('').reverse().join('') // 加完逗号之后翻转
temp = temp + ext // 整数小数拼接
return temp // 返回
} else {
return val
}
}
}整数三位一分隔
filters: {
num: (val) => {
val = '' + val // 转换成字符串
let int = val
int = int.split('').reverse().join('') // 翻转整数
let temp = '' // 临时变量
for (let i = 0; i < int.length; i++) {
temp += int[i]
if ((i + 1) % 3 === 0 && i !== int.length - 1) {
temp += ',' // 每隔三个数字拼接一个逗号
}
}
temp = temp.split('').reverse().join('') // 加完逗号之后翻转
return temp // 返回
}
}使用
{{name | num}}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。