当前位置：首页 > VUE

vue实现数字递增滚动

2026-01-21 19:10:18VUE

Vue 实现数字递增滚动效果

在 Vue 中实现数字递增滚动效果可以通过多种方式完成，以下提供两种常见方法：

使用定时器和计算属性

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

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

使用第三方库（如 vue-count-to）

安装 vue-count-to 库：

vue实现数字递增滚动

npm install vue-count-to --save

使用示例：

vue实现数字递增滚动

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

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

自定义过渡效果

可以通过 CSS 过渡增强视觉效果：

.number-transition {
  transition: all 0.5s ease-out;
}

结合 Vue 的 transition 组件：

<transition name="number-transition">
  <div :key="animatedNumber">{{ animatedNumber }}</div>
</transition>

注意事项

性能优化：对于大量数字动画，考虑使用 requestAnimationFrame
格式化：可使用 toLocaleString() 方法添加千位分隔符
中断处理：组件销毁时应清除动画帧请求

以上方法可根据具体需求选择，第三方库方案更简单快捷，自定义实现则更灵活可控。

标签: 数字 vue

分享给朋友：

vue 实现blog

Vue 实现博客的基本步骤使用 Vue 实现博客可以分为前端和后端两部分，前端使用 Vue.js 框架，后端可以选择 Node.js、Python 或其他服务端语言。以下是一个基于 Vue 的博客实…

vue实现类别

Vue 实现类别的几种方法在 Vue 中实现类别功能可以通过多种方式完成，以下是一些常见的方法：使用 v-bind:class 动态绑定类名通过对象语法或数组语法动态绑定类名，根据条件添加或移…

vue实现datalist

使用 Vue 实现 HTML5 的 datalist 功能 HTML5 的 <datalist> 元素提供了一种自动完成输入框的功能，允许用户在输入时从预定义的选项列表中选择。以下是几种在…

vue实现表单

Vue 表单实现方法双向数据绑定使用 v-model 指令实现表单元素与数据的双向绑定。适用于 input、textarea、select 等元素。 <template> <…

vue实现checkbox

Vue 实现 Checkbox 在 Vue 中实现 Checkbox 可以通过原生 HTML 的 <input type="checkbox"> 或使用 Vue 的 v-model 指令绑…

vue 水印实现

Vue 水印实现方法使用 canvas 动态生成水印在 Vue 组件中通过 canvas 绘制水印，并将其作为背景图片插入到目标元素中。这种方法灵活性高，支持动态调整水印内容、角度和透明度。 &…

vue实现数字递增滚动