当前位置：首页 > VUE

vue倒计时实现

2026-01-22 18:45:40VUE

Vue 倒计时实现方法

使用 `setInterval` 基础实现

在 Vue 组件中，通过 data 定义倒计时初始值，使用 setInterval 实现倒计时逻辑，并在组件销毁时清除定时器。

<template>
  <div>{{ countdown }}</div>
</template>

<script>
export default {
  data() {
    return {
      countdown: 60, // 初始值（单位：秒）
      timer: null
    };
  },
  mounted() {
    this.startCountdown();
  },
  methods: {
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
        }
      }, 1000);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

使用计算属性格式化显示

通过计算属性将秒数格式化为 分钟:秒 的显示形式，提升用户体验。

<template>
  <div>{{ formattedTime }}</div>
</template>

<script>
export default {
  data() {
    return { countdown: 125 }; // 示例：2分5秒
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.countdown / 60);
      const seconds = this.countdown % 60;
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }
  }
};
</script>

封装可复用组件

将倒计时逻辑封装为可复用的组件，支持通过 props 传递初始时间和回调函数。

<template>
  <div>{{ timeLeft }}</div>
</template>

<script>
export default {
  props: {
    initialTime: { type: Number, default: 60 },
    onEnd: { type: Function, default: () => {} }
  },
  data() {
    return { timeLeft: this.initialTime };
  },
  mounted() {
    const timer = setInterval(() => {
      this.timeLeft--;
      if (this.timeLeft <= 0) {
        clearInterval(timer);
        this.onEnd();
      }
    }, 1000);
  }
};
</script>

使用第三方库（如 `dayjs`）

对于复杂的时间处理（如跨天倒计时），可使用 dayjs 等库简化计算。

import dayjs from 'dayjs';

export default {
  data() {
    return { endTime: dayjs().add(1, 'hour') };
  },
  computed: {
    remainingTime() {
      const now = dayjs();
      return this.endTime.diff(now, 'second');
    }
  }
};