用vue实现倒计时

vue+js实现短信60秒倒计时

今天写登录注册的时候，发送验证码不太会，然后去百度搜了一下，总结一下这个吧。

代码实现部分：

1. html代码

    <div class="add_phone">
        <input type="text" v-model="mobiles" placeholder="请输入手机号" />
        <span @click="sendMessage">{{btntext}}</span>
      </div>
      <input v-model="num" type="text" placeholder="请输入短信验证码" />

2. js逻辑代码部分

 data() {
    return {
      mobiles: "", //手机号
      num: "", //验证码
      btntext: "获取验证码",
      isBtn: false
    };
  },

methods:{
  //获取验证码  倒计时
    sendMessage() {
      if (this.btnDisabled) {
        return;
      }
      this.getSecond(60);
      this.$http
        .getnumber({
          mobile: this.mobiles,
          sms_type: "login"
        })
        .then(res => {
          console.log(res);
        });
    },
    //发送验证码
    getSecond(wait) {
      let _this = this;
      let _wait = wait;
      if (wait == 0) {
        this.isBtn = false;
        this.btntext = "获取验证码";
        wait = _wait;
      } else {
        this.isBtn = true;
        this.btntext = "验证码(" + wait + "s)";
        wait--;
        setTimeout(function() {
          _this.getSecond(wait);
        }, 1000);
      }
    },
}