uniapp实现数字递增

Uniapp中实现数字递增可以使用v-for指令结合keyframe动画来实现。具体步骤是：首先在data中定义一个变量，用来存储当前数字。然后在template中使用v-for指令，通过循环来输出数字的每一位。在每一位数字的父元素上添加一个keyframe动画，可以使数字递增时有一个动态的效果。在keyframe动画中可以设置数字的变化方式和速度。以下是一个简单的例子：

<template>
<div class="counter-wrap">
<div class="counter-item" v-for="(n, index) in counter" :key="index" :style="{animationDelay: index*0.1 + 's'}">{{n}}</div>
</div>
</template>

<script>
export default {
data() {
return {
counter: [0, 0, 0, 0]
}
},
mounted() {
this.startCount()
},
methods: {
startCount() {
let count = 0
let timer = setInterval(() => {
count++
if (count > 9999) {
clearInterval(timer)
return
}
let str = count.toString().padStart(4, '0')
this.counter = str.split('')
}, 20)
}
}
}
</script>

<style scoped>
.counter-wrap {
display: flex;
justify-content: center;
}
.counter-item {
margin: 0 10px;
font-size: 30px;
color: #f00;
opacity: 0;
animation: counter .5s ease-in-out forwards;
}
@keyframes counter {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0px);
}
}
</style>