数字滚动动效（纯HTML5版和Vue版本）

这里提供了一个简化版的数字滚动动效的Vue组件示例：

<template>
  <div class="count-up">
    <div class="count-up__nums">
      <div v-for="(count, index) in numbers" :key="index" class="count-up__num">
        {{ count }}
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'CountUp',
  data() {
    return {
      numbers: [0, 0, 0, 0], // 初始化四个数字
      target: 9999, // 目标数字
    };
  },
  mounted() {
    this.startCounting();
  },
  methods: {
    startCounting() {
      const interval = setInterval(() => {
        if (this.numbers.some(num => num < this.target)) {
          this.numbers = this.numbers.map(num => (num >= this.target ? num : num + 1));
        } else {
          clearInterval(interval);
        }
      }, 10);
    },
  },
};
</script>
 
<style scoped>
.count-up__nums {
  display: flex;
}
.count-up__num {
  font-size: 24px;
  line-height: 1em;
  margin-right: 4px;
  font-family: sans-serif;
}
</style>

这个Vue组件会创建一个数字滚动的动画，从0开始，每10毫秒增加一次，当数字达到指定的target值（这里是9999）时，动画停止。CSS用于控制数字的显示样式。这个示例简化了原始代码中的一些复杂逻辑，使其更易于理解和维护。