当前位置：首页 > VUE

vue实现倒计时

2026-01-11 20:20:04VUE

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>

使用 computed 格式化显示时间

通过 computed 属性将秒数格式化为 分钟:秒 的形式，提升可读性。

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

<script>
export default {
  data() {
    return {
      countdown: 120 // 初始倒计时时间（秒）
    };
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.countdown / 60);
      const seconds = this.countdown % 60;
      return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
    }
  },
  mounted() {
    setInterval(() => {
      if (this.countdown > 0) {
        this.countdown--;
      }
    }, 1000);
  }
};
</script>

使用 Vue 3 Composition API 实现倒计时

在 Vue 3 中，可以通过 ref 和 onMounted 等 Composition API 实现倒计时功能。

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

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const countdown = ref(60);
    let timer = null;

    const startCountdown = () => {
      timer = setInterval(() => {
        if (countdown.value > 0) {
          countdown.value--;
        } else {
          clearInterval(timer);
        }
      }, 1000);
    };

    onMounted(startCountdown);
    onBeforeUnmount(() => clearInterval(timer));

    return { countdown };
  }
};
</script>

结合 localStorage 实现持久化倒计时

通过 localStorage 存储倒计时剩余时间，确保页面刷新后倒计时继续。

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

<script>
export default {
  data() {
    return {
      countdown: localStorage.getItem('countdown') || 60
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      if (this.countdown > 0) {
        this.countdown--;
        localStorage.setItem('countdown', this.countdown);
      } else {
        clearInterval(this.timer);
        localStorage.removeItem('countdown');
      }
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

使用第三方库 vue-countdown

如果需要更复杂的倒计时功能，可以使用第三方库如 vue-countdown。

安装依赖：

npm install vue-countdown

使用示例：

<template>
  <vue-countdown :time="60 * 1000" v-slot="{ minutes, seconds }">
    {{ minutes }}:{{ seconds }}
  </vue-countdown>
</template>

<script>
import VueCountdown from 'vue-countdown';

export default {
  components: { VueCountdown }
};
</script>

以上方法涵盖了从基础实现到高级功能的多种倒计时方案，可以根据实际需求选择适合的方式。

vue实现倒计时