简单实现vue验证码60秒倒计时功能
<span v-if="codeShow" @click="getPhoneCode">点击获取验证码</span>
<span v-if="!codeShow" class="count">{{count}}秒后重试</span>
data(){
return {
codeShow : true,
count: '',
timer: null,
}
},
methods:{
getPhoneCode(){ //点击获取验证码
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.codeShow = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.codeShow = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
}
转载请注明原文地址:https://ipadbbs.8miu.com/read-1255.html