引用本文主要介绍vue实现手机号验证码登录（60s禁用倒计时），帮助大家更好的理解和使用vue，具有很好的参考价值。有兴趣的朋友可以了解一下最近的一个vue项目，前端通过手机号验证码登录。获取验证码的按钮需要倒计时。单击一次后，60秒内不能再次单击。先看效果图：输入正确格式的手机号后，可以点击“获取验证码”按钮；点击“获取验证码”后，按钮进入60s倒计时，效果图如下：效果图准备好了，接下来就是代码：{{codeBtnWord}}datareturndata:data(){return{loginForm:{phoneNumber:'',verificationCode:'',},codeBtnWord:'获取验证码',//获取验证码按钮文本waitTime:60,//获取验证码按钮过期时间getCodeBtnDisable:false,}}检查电话号码是否正确computed:{//用于验证手机号码格式是否正确phoneNumberStyle(){letreg=/^1[3456789]\d{9}$/if(!reg.test(this.loginForm.phoneNumber)){returnfalse}returntrue}}methods添加异步获取验证码的方法sendCode(){try{letparams={}params.phone=this.loginForm.phoneNumberletdata=awaitaxios.post('/sendMessage',params)this.$message.success('验证码发送成功')letthat=thisthat.waitTime--that.getCodeBtnDisable=truethis.codeBtnWord=`${this.waitTime}s然后重新发送`lettimer=setInterval(function(){if(that.waitTime>1){that.waitTime--that.codeBtnWord=`${that.waitTime}s然后重新发送`}else{clearInterval(timer)that.codeBtnWord='获取验证码'that.getCodeBtnDisable=falsethat.waitTime=60}},1000)}catch(res){console.log(res)}}以上就是vue实现手机号验证码登录（60s禁用倒计时）的详细内容)，如有错误请指出！
