vue 实现 获取验证码倒计时

 　　　　　　　<div class="re-t">
                <div class="te1">验证码</div>
                <div class="te-input"><input placeholder="请输入验证码" v-model="code"></div>
                <div class="yanzhm" v-show="isShow" @click="sendCode">获取验证码</div>
                <div class="daojishi" v-show="!isShow">{{ time }}</div>
            </div>

data:

isShow:true,
time:60,

methods:

// 获取验证码
        sendCode() {
            if(this.phone === '' || this.phone.length < 11){
                return alert('请输入合法的手机号')
            }
            let params = new URLSearchParams()
            params.append("phone",this.phone)
            params.append("type",1)
            sendCode(params)
                .then(res => {
                    if(res.code === 200) {
                        this.isShow = false;
    
                        let auth_timer = setInterval(()=>{  //定时器设置每秒递减
                          this.time--;        //递减时间
                          if(this.time<=0){
　　　　　　　　　　　　　　　　  this.time = 60;
                            this.isShow = true;    //60s时间结束还原v-show状态并清除定时器
                            clearInterval(auth_timer);
                          }
                        },1000)

                        alert('验证码已发送,请注意查收')
                    } else {
                        alert(err.message)
                    }
                })
        },