html代码如下:
<button @click='sendCodeBtn'>
{{send?'发送验证码':second+'s重新发送'}}
</button>
data中的内容:
data() {
return {
send:true,//按钮状态
second:0,
s:60,//默认倒计时
};
},
事件触发函数:
methods:{
sendCodeBtn(){
let that=this;
//防止多次重复点击
if(!that.send){
return false;
}
that.send=false;
that.time()
},
//倒计时
time(){
let that=this;
that.second=that.s;
let interval = setInterval(()=>{
if(that.second==1){
that.send=true;
that.second=that.s;
clearInterval(interval)
}else{
that.second--
}
},1000)
}
}
前端小白的个人总结,勿喷