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);
      }
    },