vue实现倒计时获取验证码效果

• Z时代
• 2024-01-10
• 分类：综合

本文实例为大家分享了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实现倒计时获取验证码效果 的全部内容， 来源链接： utcz.com/z/349445.html