vue.js 发送验证码 倒计时setInterval

 

<template>
  <div class="hello">
     
     <button @click='send'>{{content}}</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      content:'发送验证码',
      totaltime:60,
      clickCancle:true //多次点击不会调用定时器
    }
  },
  methods:{
    send() {
      if(!this.clickCancle) return;
      this.clickCancle=false;
      this.content=this.totaltime+'s后重新发送';
      var m=setInterval(()=>{
        console.log(this.totaltime);
        this.totaltime--;
        this.content=this.totaltime+'s后重新发送';
         if(this.totaltime==0){
            clearInterval(m);
            this.content='发送验证码';
            this.totaltime=60;
            this.clickCancle=true
      }
      },1000);
     
    }
  }
 

}
</script>