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>