简单实现vue验证码60秒倒计时功能

简单实现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)
                 }
             }
展开阅读全文
©️2020 CSDN 皮肤主题: 游动-白 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值