vue验证码倒计时

<li>
<input class="yzm" type="text" placeholder="请输入短信验证码">
                        
<input v-show="sendAuthCode" type="button" class="sends" id="send1" value="获取验证码" @click="getAuthCode" />
                        
<input v-show="!sendAuthCode" style="display:none" type="button" class="sends" id="send2" v-model="auth_time" />
                        
</li>

 

<script>
export default {
  name: 'findPass',
  data () {
    return {
      sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
      auth_time: 0, /*倒计时 计数器*/
    }
  },
  methods: {
    getAuthCode:function () {
            this.sendAuthCode = false;
            this.auth_time = 30;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
        }
    }
}
</script>