簡(jiǎn)單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能

<span v-if="codeShow" @click="getPhoneCode">點(diǎn)擊獲取驗(yàn)證碼</span><span v-if="!codeShow" class="count">{{count}}秒后重試</span> data(){ return { codeShow : true, count: '', timer: null, } }, methods:{getPhoneCode(){ //點(diǎn)擊獲取驗(yàn)證碼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)}}

總結(jié)

以上是生活随笔為你收集整理的简单实现vue验证码60秒倒计时功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。