vue学习笔记三：获取验证码后显示倒计时

最新推荐文章于 2024-06-25 12:02:02 发布

半夏ing

最新推荐文章于 2024-06-25 12:02:02 发布

阅读量395

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Fiona_lms/article/details/79873305

版权

vue 专栏收录该内容

45 篇文章 5 订阅

订阅专栏

代码如下：

 <div class="identifying" v-show="codeshow == 'true'">
       <div class="img2"><img src="../../static/img/icon_identifying_code.png"></div>
        <input placeholder="请输入验证码" type="text" v-model="idenfitycode"/>
        <div class="get_identifying_code" v-on:click="sendcode" v-show="sendAuthCode">获取验证码</div>
        <div class="get_identifying_code" v-show="!sendAuthCode" >{{auth_time}} <span> 秒之重新发送验证码</span> </div>
</div>

动态部分：

  data() {
              return {
                    codeshow:"true",
                    passwordShow:"false",
                    password_login:"true",
                    phoneNum:"", //手机号
                    idenfitycode:"",//验证码
                    password:"",//密码
                    sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
                    auth_time: 0, /*倒计时 计数器*/
              }
        },

倒计时部分：

 sendcode(){
             //电话号码验证
             var reg=11&& /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
             var phoneNum = this.phoneNum;
             if(!phoneNum){
                alert("请输入手机号码");
                return;
             }
             if(reg.test(this.phoneNum)){
                 this.sendAuthCode = false;
                 this.auth_time = 60;
                 var auth_timetimer =  setInterval(()=>{
                     this.auth_time--;
                     if(this.auth_time<=0){
                         this.sendAuthCode = true;
                         clearInterval(auth_timetimer);
                     }
                 }, 1000);

             }else{
               alert("手机格式不正确");
             }
            },