Vue实现获取验证码倒计时

HTML部分:
获取验证码

                    话不多说直接上干货

 1 ```"show" @click="getCode">获取验证码
 2    "!show" class="count">{{count}} 秒
 3 JS部分:
 4 data(){
 5   return {
 6    show: true,
 7    count: '',
 8    timer: null,
 9   }
10  },
11  methods:{
12    getCode(){
13      const TIME_COUNT = 60;
14      if (!this.timer) {
15        this.count = TIME_COUNT;
16        this.show = false;
17        this.timer = setInterval(() => {
18        if (this.count > 0 && this.count <= TIME_COUNT) {
19          this.count--;
20         } else {
21          this.show = true;
22          clearInterval(this.timer);
23          this.timer = null;
24         }
25        }, 1000)
26       }
27    } 
28  }

 

你可能感兴趣的:(Vue实现获取验证码倒计时)