需求背景: 最近做首页,需求是数字的动态增长及数字的三位数加逗号,金额的显示处理。
1.如何处理整数。需求:整数每三位数一个逗号。
Vue 项目,使用filters函数。在export default 里写该函数。然后{{val | numFormat}},即可生效。
filters:{
numFormat(val) {
if(!val) return '0'
return val.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')
}
}
2.处理金额数字的过滤函数。在export default 里写该函数。然后{{val | dollarNum}},即可生效。
filters:{
dollarNum(val) {
if(!val) return '0.00'
const intPart = Number(val).toFixed(0) //获取整数部分
const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,') //整数部分逢三断一
let floatPart = '.00'
const valArray = val.split('.')
if(valArray.length === 2) {
floatPart = valArray[1].toString()
if (floatPart.length === 1) {
return `${intPartFormat}.${floatPart}0`
} else {
return `${intPartFormat}.${floatPart}`
}
} else {
return `${intPartFormat}${floatPart}`
}
}
}
3.数字增长的动态显示。
<span ref="numberGrow" :data-time= "time" :data-value="totalInfo.value">0</span>
data() {
return {
time: 2
}
}
//这个写到methods里
numberGrow(ele) {
const _this = this
const step = Math.ceil((_this.totalInfo.value * 10) / (_this.time * 1000))
let current = 0
let start = 0
let t = setInterVal (function(){
start += step
if (start > _this.totalInfo.value) {
clearInterval(t)
start = _this.totalInfo.value
t = null
}
if (current ==== start) {
return
}
current = start
ele.innerHtml = current.toSting().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')
},10)
}
// 使用:在请求回来的数据后,调用该方法,即可实现动态增长数据。
this.numberGrow(this.refs.numberGrow)