vue实现倒计时获取验证码效果
(编辑：jimmy 日期: 2024/11/17 浏览：2)
本文实例为大家分享了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时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。