简单验证码倒计时

使用的是vue框架 

template部分：

<div><input placeholder="手机号"/></div>
<div><input placeholder="验证码"/></div>
<button @click="getcode" :disabled='disabled'>{{text}}</button>
<div>登录</div>
<div>没有账号？  去注册</div>
<div>忘记密码</div>

script部分： 

data() {
		return {
			disabled: false, //按钮是否禁用
			tab: 0,
			totalCount: 0, //倒计时数值
			text:"获取验证码",
			timer: null   //计时器
		}
	}

进行的点击事件

methods: {
		getcode() {
			this.disabled = true; //点击后禁用按钮
			this.totalCount = 10; //设置倒计时数值
			this.timer = setInterval(() => {
				this.text = `已发送（${this.totalCount}）`;
				this.totalCount -- ;
				if(this.totalCount < 0 ) {
					clearInterval(this.timer); //清空计时器
					this.text = "获取验证码";  
					this.disabled = false;  //开启按钮
				}
			}, 1000);
			console.log(this.disabled);
		}
	}

目前有个小bug，点击“获取验证码”之后不会立即显示已发送，停顿1s后才会执行，并且点击按钮后，按钮应该是禁用状态，但是手势一直存在