当前位置：首页 > VUE

vue实现倒计时功能

2026-01-06 23:10:46VUE

实现倒计时功能的方法

在Vue中实现倒计时功能可以通过多种方式，以下是几种常见的方法：

使用setInterval和clearInterval

通过JavaScript的setInterval和clearInterval方法可以实现倒计时功能。在Vue组件中，可以在mounted钩子中启动计时器，并在beforeDestroy钩子中清除计时器以避免内存泄漏。

vue实现倒计时功能

<template>
  <div>
    <p>剩余时间: {{ countdown }}</p>
  </div>
</template>

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

使用Vue的计算属性格式化时间

如果需要将倒计时显示为“分钟:秒”格式，可以使用计算属性来格式化时间。

vue实现倒计时功能

<template>
  <div>
    <p>剩余时间: {{ formattedTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countdown: 60,
      timer: null
    };
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.countdown / 60);
      const seconds = this.countdown % 60;
      return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
    }
  },
  mounted() {
    this.startCountdown();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
        }
      }, 1000);
    }
  }
};
</script>

使用第三方库

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

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

<script>
import VueCountdown from '@chenfengyuan/vue-countdown';

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

使用Vue 3的Composition API

在Vue 3中，可以使用Composition API实现倒计时功能。

<template>
  <div>
    <p>剩余时间: {{ countdown }}</p>
  </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>