1.下载countup.js
2.引入
import CountUp from ‘…/xxx/xxx’
一:最初始一版(只是简单实现数字滚动增长)
<div id="dataId">{{dataNum}}</div>
data() {
return(){
dataNum:0,
}
}
watch(){
dataNum:{
handler() {
if(this.dataNum) {
this.numUp(0,this.dataNum)
}
}
}
}
numUp(start,end){
let dataTemp = new CountUp( 'dataId',0,end,0,2);
dataTemp.start();
}
二:数字从上一次位置开始增长,不是从0开始,增加视觉效果
<div id="dataId">{{dataNum}}</div>
data() {
return(){
dataNum:0,
dataStart:-1, //给数字初始值
dataEnd:0,
}
}
watch(){
dataNum:{
handler() {
if(this.dataNum) {
this.dataStart === -1 ? (this.dataStart = 0) : (this.dataStart=this.dataEnd);
this.dataEnd = this.dataNum
}
this.numUp(this.dataStart,this.dataEnd)
}
}
}
numUp(start,end){
let dataTemp = new CountUp( 'dataId',start,end,0,2);
dataTemp.start();
}