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

你可以使用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>