vue获取验证码后倒计时

<span v-show="!this.timer" @click="getCode">获取验证码</span>
<span v-else class="count">{{count}} s</span>

data(){
  return {
   show: true,
   count: '',
   timer: null,
  }
 },
 methods:{
   getCode(){
     const TIME_COUNT = 60;
     if (!this.timer) {

    // 发阿贾克斯请求
    api.doSth
this.count = TIME_COUNT; this.show = false; this.timer = setInterval(() => { if (this.count > 0 && this.count <= TIME_COUNT) { this.count--; } else { this.show = true; clearInterval(this.timer); this.timer = null; } }, 1000) } } }

 

posted @ 2022-01-22 23:01  Magi黄元  阅读(97)  评论(0编辑  收藏  举报