其实要实现这个功能原理非常简单,就是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) },