我热爱春天，因为春天充满了生机，充满了新的希望！
本文实例为大家分享了vue实现倒计时获取验证码效果的具体代码，供大家参考，具体内容如下
效果：
代码：
<template>
<div>
<el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button>
</div>
</template>
<script>
export default {
data() {
return {
disabled:false,
time:5,
btntxt:"发送验证码",
};
},
methods: {
sendcode(){
this.time=5;
this.timer();
},
//发送手机验证码倒计时
timer() {
if (this.time > 0) {
this.disabled=true;
this.time--;
this.btntxt=this.time+"秒";
setTimeout(this.timer, 1000);
} else{
this.time=0;
this.btntxt="发送验证码";
this.disabled=false;
}
},
}
}
</script>
<style scoped>
.el-button{
margin: 100px 50px;
}
</style>
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
到此这篇关于vue如何实现倒计时获取验证码效果就介绍到这了。为了以后能随时偷懒，现在就得时刻努力。更多相关vue如何实现倒计时获取验证码效果内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
