vue验证码倒计时

vue实现验证码倒计时

发送获取验证码请求成功以后利用setInterval每秒在原有时间上减1实现。

<span class="yzm" @click="codes" v-if="!btnBool" >{{yzmtext}}</span>
<span class="yzm" v-if="btnBool">{{yzmtext}}</span>

export default {
  name: "Login",
  data() {
       return {
           yzmtext:"获取验证码",
           btnBool:"false"
       }
  },
   methods: {
     //请求获取验证码******
      //验证码倒计时
      this.btnBool = true;
      let i = 60;     //倒计时时间
      let timer = setInterval(() => {
        this.yzmtext = i + "s";
        i--;
        if (i < 0) {
          this.btnBool = false;
          this.yzmtext = "获取验证码";
          clearInterval(timer);
        }
      }, 1000);
    },
   }
    
  }