基於vue的倒計時demo

一般獲取短信驗證碼的時候會用到這個呆毛：

button裏面包兩個span標籤，根據點擊狀態，顯示不同的span，關鍵代碼就是倒計時：

     <button @click="getCode">
          <span  class="tip" v-if="!sendMsgDisabled && !reGet">發送驗證碼</span>
          <span  class="tip" v-if="!sendMsgDisabled && reGet">重新獲取</span>
          <span  class="tip" v-if="sendMsgDisabled">{{rTime+'秒後重新獲取'}}</span>
        </button>

 data() {
    return {
      reGet: false, // 重新獲取
      rTime: 60, // 發送驗證碼倒計時
      sendMsgDisabled: false, // 發送驗證碼按鈕狀態
      tel: "",
      code: ""
    };
  },

      send() {
        let that = this;
      that.sendMsgDisabled = true;
      let rTime = that.rTime;
      // 倒計時
      let interval = window.setInterval(() => {
        if (--that.rTime <= 0) {
          that.rTime = rTime;
          that.sendMsgDisabled = false;
          that.reGet = true; // 重新獲取按鈕
          window.clearInterval(interval);
        }
      }, 1000);
      }

線上完整代碼請戳戳戳戳戳