基于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);
      }

线上完整代码请戳戳戳戳戳