首页 > 其他 > 详细

Vue实现获取验证码倒计时

时间:2020-08-13 14:07:02      阅读:104      评论:0      收藏:0      [点我收藏+]

HTML部分:
<span v-show=“show” @click=“getCode”>获取验证码

                    话不多说直接上干货

 1 ```<span v-show="show" @click="getCode">获取验证码</span>
 2    <span v-show="!show" class="count">{{count}} 秒</span>
 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实现获取验证码倒计时

原文:https://www.cnblogs.com/haiyang-/p/13495581.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!