vue倒计时60秒改变按钮状态效果demo(整理)

知秋~

已于 2024-03-03 20:16:18 修改

阅读量824

点赞数 9

CC 4.0 BY-SA版权

文章标签：倒计时 60秒倒计时 60秒倒计时改变按钮

于 2024-01-10 10:08:28 首次发布

本文链接：https://blog.csdn.net/qq_38881495/article/details/135496296

本文介绍了如何在Vue应用中使用计时器和状态绑定创建一个简单的倒计时功能，包括初始化计时器变量、设置方法和模板中的动态显示。

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

你可以使用Vue的计时器和绑定状态的方法来实现这个功能。
首先，在data中添加一个计时器countdown，初始值为0。
data() {
  return {
    countdown: 0
  }
}

<template>
  <div>
    <button @click="startCountdown" :disabled="countdown > 0">点击开始倒计时</button>
  </div>
</template>

methods: {
  startCountdown() {
    this.countdown = 59 // 设置倒计时为59秒
    const timer = setInterval(() => {
      if (this.countdown > 0) {
        this.countdown--
      } else {
        clearInterval(timer)
      }
    }, 1000)
  }
}

<template>
  <div>
    <button @click="startCountdown" :disabled="countdown > 0">
      {{ countdown > 0 ? '正在倒计时（'+countdown+'）秒' : '点击开始倒计时' }}
    </button>
  </div>
</template>