一、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" />