vue实现验证码倒计时

template

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

script

 data(){
  return {
   codeShow: true,  //判断显示隐藏
   count: '',     //显示时的文字内容
   timer: null,    
  }
 },
 getPhoneCode() {
      //点击获取验证码
      const TIME_COUNT = 60;  //倒计时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);
      }
    },