zl程序教程

您现在的位置是:首页 >  前端

当前栏目

vue实现倒计时60秒

Vue 实现 倒计时 60
2023-09-14 09:13:43 时间
<span v-show="show" @click="getCode" class="getCode">获取验证码</span>
<span v-show="!show" class="count">{{count}}s后重新获取</span>
data(){
	return {
		show: true,
		count: '',
		timer: null,
	}
},
methods: {
        getCode(){
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000)
            }
        }
    }

转载:感谢分享
原文链接https://www.jb51.net/article/125533.html
在这里插入图片描述
在这里插入图片描述