验证码 倒计时 vue 操作对象

//html
<input type="number" v-model="phoneNumber"  placeholder="请输入手机号"/>
<input type="number" v-model="phoneCode" placeholder="请输入验证码"/>
<span style="color: #EA5504;" @click="sendMessage($event)">发送验证码</span>

//数据
data:{
    phoneNumber: '',
    phoneCode: '',

    num: 60,
    count: 60
}

//方法
sendMessage(element){ //vue对象 类似于jquery dom(this)
    if(null == this.phoneNumber || undefined == this.phoneNumber || '' == this.phoneNumber){
        vant.Toast({position:'bottom',message:'请先输入手机号', duration:1000});
        return;
    }
    if (!(/^1[3456789]\d{9}$/.test(this.phoneNumber))) {
        vant.Toast({position:'bottom',message:'请输入正确的手机号码', duration:1000});
        return;
    }
    var that = this;
    if(that.num < that.count){//时间小于count秒 return
        return;
    }
    that.num = that.num -1;
    element.target.innerHTML = that.num + 's后重新获取'
    element.target.style.color = 'gray'
    element.target.disabled = 'disabled'
    var timer = setInterval(function () {
        that.num = that.num -1;
        element.target.innerHTML = that.num + 's后重新获取'
        if (that.num === 0) {
            element.target.disabled = ''
            element.target.style.color = ' #EA5504'
            element.target.innerHTML = '获取验证码'
            clearInterval(timer);
            that.num = that.count//重置count秒
        }
    }, 1000)
}