vue实现验证码倒计时

template

<span v-if="codeShow" @click="getPhoneCode">获取验证码</span> <span v-if="!codeShow">{{count}}秒后重试</span>

script

data(){ return { codeShow: true, //判断显示隐藏 count: '', //显示时的文字内容 timer: null, } }, getPhoneCode() { //点击获取验证码 const TIME_COUNT = 60; //倒计时60秒 if (!this.timer) { this.count = TIME_COUNT; this.codeShow = false; this.timer = setInterval(() => { if (this.count > 0 && this.count <= TIME_COUNT) { this.count--; } else { this.codeShow = true; clearInterval(this.timer); this.timer = null; } }, 1000); } },