其實要實現這個功能原理非常簡單,就是setInterval+setTimeout+clearInterval結合使用,首先在data里定義一個變量second,初始值為60,然后在setInterval里執行每秒減1的操作,setTimeout在60秒后執行clearInterval清除定時器的操作
<view v-if="showText==true" class="send" @click="getCode">發送驗證碼</view> <view v-else class="send">{{second}}s重新發送</view>
data() {
return {
second:60,
showText:true,
};
},
getCode(){//倒計時 this.showText = false var interval = setInterval(() => { let times = --this.second this.second = times<10?'0'+times:times //小於10秒補 0 }, 1000) setTimeout(() => { clearInterval(interval) this.second=60 this.showText = true }, 60000) },