簡單實現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)}}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。