当前位置：首页 > VUE

vue实现数字自增

2026-02-25 01:03:34VUE

Vue 实现数字自增的方法

在 Vue 中实现数字自增可以通过多种方式完成，以下是一些常见的实现方法：

使用数据绑定和定时器

通过 Vue 的响应式数据结合 setInterval 实现数字自增效果：

vue实现数字自增

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.count++
    }, 1000)
  }
}
</script>

使用计算属性实现动态递增

结合计算属性和 requestAnimationFrame 实现平滑递增效果：

<template>
  <div>{{ animatedNumber }}</div>
</template>

<script>
export default {
  data() {
    return {
      number: 100,
      duration: 2000,
      startValue: 0,
      startTime: null
    }
  },
  computed: {
    animatedNumber() {
      return Math.floor(this.startValue)
    }
  },
  mounted() {
    this.animateNumber()
  },
  methods: {
    animateNumber() {
      const step = (timestamp) => {
        if (!this.startTime) this.startTime = timestamp
        const progress = Math.min((timestamp - this.startTime) / this.duration, 1)
        this.startValue = progress * this.number
        if (progress < 1) {
          requestAnimationFrame(step)
        }
      }
      requestAnimationFrame(step)
    }
  }
}
</script>

使用第三方库实现

安装 vue-count-to 插件实现更丰富的数字动画效果：

vue实现数字自增

npm install vue-count-to

组件中使用方式：

<template>
  <count-to :start-val="0" :end-val="1000" :duration="3000"></count-to>
</template>

<script>
import CountTo from 'vue-count-to'
export default {
  components: { CountTo }
}
</script>

使用过渡效果的数字递增

结合 Vue 的过渡系统实现数字变化时的动画效果：

<template>
  <transition name="fade" mode="out-in">
    <div :key="count">{{ count }}</div>
  </transition>
  <button @click="increment">增加</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>