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

我热爱春天,因为春天充满了生机,充满了新的希望!

本文实例为大家分享了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如何实现倒计时获取验证码效果内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
VUE如何实现图片验证码功能

vue 验证码界面如何实现点击后标灰并设置div按钮不可点击状态

Vue 如何实现登录界面验证码功能

vue中如何使用极验验证码的方法(附demo)

Vue插件之滑动验证码用法详解