vue中实现发送验证码倒计时

3,474 阅读1分钟

 <el-button type="primary" v-show="timeTrue == true" @click="acquire">获取验证码</el-button> 
   <el-button type="primary" v-show="timeTrue == false" >{{ time }}秒后重新获取</el-button >

data里:

<script>
export default { 
 data() {   
 return {  
    timeTrue: true,   
   time: 0   
 }; 
 }, 
 created() {},  
methods: {   
   acquire() {  
     this.timeTrue = false;   
     this.time = 60;   
     var setTimeoutS = setInterval(() => {  
      this.time--;   
     if (this.time <= 0) {     
     clearInterval(setTimeoutS);  
        this.timeTrue = true;      
  }   
   }, 1000); 
   }, 
 }
}
</script>