Vue实现倒计时获取验证码效果_良笙_前端开发者

本文实例为大家分享了vue实现倒计时获取验证码效果的具体代码，供大家参考，具体内容如下

效果：

代码：

<template>
 <div>
  <el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button>
 </div>
</template>
 
 <script>
export default {
  data() {
   return {
    disabled:false,
    time:5,
    btntxt:"发送验证码",
   };
  },
  methods: {
   sendcode(){
    this.time=5;
    this.timer(); 
   },
   //发送手机验证码倒计时
   timer() {
    if (this.time > 0) {
     this.disabled=true;
      this.time--;
      this.btntxt=this.time+"秒";
      setTimeout(this.timer, 1000);
    } else{
      this.time=0;
      this.btntxt="发送验证码";
      this.disabled=false;
    }
   },
  }
}
</script>
 
<style scoped>
.el-button{
 margin: 100px 50px;
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持前端开发者。