vue中短信验证码60秒倒计时功能

HTML

<span v-show="show" @click="getCode">获取验证码span>

<span v-show="!show" class="count">{{count}} sspan>

JS

data(){
  return {
   show: true,
   count: '',
   timer: null,
  }
 },
 methods:{
   getCode(){
     const TIME_COUNT = 60;
     if (!this.timer) {
       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)
      }
   }  
 }

你可能感兴趣的:(vue中短信验证码60秒倒计时功能)