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

 <span v-if="codeShow" @click="getPhoneCode">点击获取验证码</span>
 <span v-if="!codeShow" class="count">{{count}}秒后重试</span>

  

 

  
1
  
2
 

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)
                 }
             }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
 

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/107050282