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

2024-01-10 10:26:35

在这里插入图片描述

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

文章来源:https://blog.csdn.net/qq_38881495/article/details/135496296
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。