vue使用setInterval定时器实现倒计时功能

祖先生

已于 2022-04-01 14:44:44 修改

阅读量1.2k

点赞数 1

文章标签： vue

于 2021-05-06 10:42:59 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43908123/article/details/116448788

版权

本文介绍了如何使用Vue.js开发一个简单的倒计时组件，通过设置定时器实现从指定秒数开始倒计时，并在计时结束时自动清除。适合初学者了解基础的定时器编程和Vue组件应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export default {
  data() {
    return {
      timer: '', // 定时器名称
      timerCount: 15 // 倒计时秒数
    }
  },
  mounted() {
  	this.setTime() // 执行定时器
  },
  beforeDestroy() { // 页面销毁前，清除定时器
    clearInterval(this.timer);
  },
  methods: {
  	// 定时器功能，倒计时
    setTime() {
      this.timer = setInterval(() => {
        this.timerCount--
        if (this.timerCount === 0) {
          clearInterval(this.timer) // 清除定时器
        }
      }, 1000);
    }
  }
}