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

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vue倒计时获取验证码 vue获取验证码 vue倒计时