简单实现vue验证码60秒倒计时功能

    技术2022-07-10  131

    简单实现vue验证码60秒倒计时功能

    <span v-if="codeShow" @click="getPhoneCode">点击获取验证码</span> <span v-if="!codeShow" class="count">{{count}}秒后重试</span> data(){ return { codeShow : true, count: '', timer: null, } }, methods:{ getPhoneCode(){ //点击获取验证码 const TIME_COUNT = 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) } }
    Processed: 0.009, SQL: 9