vue 获取验证码倒计时

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

html部分

<div class="form-code">
　　<input type="number" v-model="codeVer" placeholder="请输入验证码" />
　　<button type="button" @click="getCode()" :class="{on:showBtnOn}" v-text="codeText"></button>
</div>

codeText按钮上显示的文字；
getCode为按钮点击事件；
codeVer为验证码；
showBtnOn：是否添加button上的class on

css部分，按钮点击的时候给一个灰色背景：

.form-code button.on{background-color:#999}

在date中定义双向绑定的部分

data: {
　　howBtnOn:false,
　　codeVer:'',
　　codeText:'获取验证码'
},    

点击方法getCode开始倒计时：

var time = 60;
var timer = setInterval(function(){
　　time--;
　　vm.codeText = time+"秒重发"
　　vm.showBtnOn = true;
　　
　　//time==0 时，倒计时结束，按钮切换为原来的颜色，清除定时器
　　if(time==0){
　　　　clearInterval(timer);
　　　　vm.codeText = "获取验证码";
　　　　vm.showBtnOn = false;
　　}
},1000);

以上是 vue 获取验证码倒计时 的全部内容， 来源链接： utcz.com/z/375349.html