基于vue的短信验证码倒计时

el-button里面包两个span标签，根据点击状态，显示不同的span，关键代码就是倒计时：

<el-button  type="primary" class="code_btn" style="background: #fff;color: #000;border: 1px solid #999;float: right;margin-top: 10px;" @click.native.prevent="getMessageCode('formData')" :loading="logining">
   <span v-if="!sendMsgDisabled">获取验证码</span>
   <span v-if="sendMsgDisabled">{{codeTime+'秒后获取'}}</span>
</el-button>

data里设置初始数据：

codeTime: 59, // 发送验证码倒计时
sendMsgDisabled: false, // 是否显示获取验证码按钮

在发送短信验证码接口请求的成功回调函数里：

_this.sendMsgDisabled = true;
 let codeInterval = window.setInterval(function() {
     if ((_this.codeTime--) <= 0) {
           _this.codeTime = 59;
           _this.sendMsgDisabled = false;
           window.clearInterval(codeInterval);
      }
  }, 1000);