当前位置：首页 > VUE

vue实现数字翻页递增

2026-01-20 12:14:43VUE

Vue 实现数字翻页递增效果

实现数字翻页递增效果可以通过 Vue 的过渡动画和动态数据绑定完成。以下是具体实现方法：

基本实现思路

使用 Vue 的 transition 组件结合 CSS 动画，通过改变数字触发动画效果。数字变化时，旧数字向上滑出，新数字从下方滑入。

代码实现

<template>
  <div class="counter-container">
    <div class="counter">
      <transition name="slide" mode="out-in">
        <span :key="currentNumber" class="number">{{ currentNumber }}</span>
      </transition>
    </div>
    <button @click="increment">增加</button>
  </div>
</template>

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

<style>
.counter-container {
  text-align: center;
  margin-top: 50px;
}

.counter {
  font-size: 48px;
  height: 60px;
  overflow: hidden;
  position: relative;
}

.number {
  display: inline-block;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter {
  transform: translateY(20px);
  opacity: 0;
}

.slide-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>

自定义数字位数

如果需要显示固定位数的数字（如始终显示 4 位数），可以使用计算属性格式化数字：

computed: {
  formattedNumber() {
    return this.currentNumber.toString().padStart(4, '0')
  }
}

自动递增效果

添加定时器实现自动递增：

mounted() {
  this.timer = setInterval(() => {
    this.currentNumber += 1
  }, 1000)
},
beforeDestroy() {
  clearInterval(this.timer)
}

多位数独立动画

对于多位数的每个数字单独动画：

vue实现数字翻页递增

<template>
  <div class="multi-digit">
    <transition-group name="slide" tag="div" class="digits">
      <span v-for="(digit, index) in digits" :key="index" class="digit">{{ digit }}</span>
    </transition-group>
  </div>
</template>

<script>
export default {
  computed: {
    digits() {
      return this.currentNumber.toString().split('')
    }
  }
}
</script>

<style>
.digits {
  display: flex;
}

.digit {
  font-size: 48px;
  margin: 0 2px;
}
</style>