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>