一、countup.js
1、下载
npm i countup.js@1.9.3 (最新版本的有问题)
2、DOM
<div class="num-wrapper">
<span ref="countupRef" v-for="item in numList" :key="item">{{item}}</span>
</div>
css:
.num-wrapper {
> span {
padding: 10px;
display: inline-block;
background-color: rgba(red, 0.5);
margin-right: 10px;
font-family: 'digital';
font-size: 28px;
}
}
3、引入和使用
import CountUp from 'countup.js'
export default {
data() {
return { numList: [7539810.1493, 7087961, 1010452, 5163393] }
},
methods: {
initCountUp() {
// 在created中执行函数时需要通过nextTick拿到最新的DOM
this.$nextTick(() => {
const countupLength = this.$refs.countupRef.length
let animal = null
for (let i = 0; i < countupLength; i++) {
animal = new CountUp(
this.$refs.countupRef[i], // 目标元素
0, // 开始值
this.$refs.countupRef[i].innerText, // 结束值
2, // 小数位数
1.5 // 动画时间
)
animal.start()
}
})
}
},
created() {
this.initCountUp()
}
4、效果:
二、vue-countupjs
1、下载
npm i vue-countupjs
2、引入并注册
import VueCountUp from 'vue-countupjs'
components: { VueCountUp }
3、使用
<VueCountUp :start-value="0" :end-value="100" />