vue获取验证码倒计时效果

css 这个用来禁止点击事件

        .closeclick{
            pointer-events: none;/*禁用点击事件*/
        }

html代码

<div class="list-item">
        <div class="list-name">
          验证码
        </div><!--
          --><input placeholder="请输入原手机号码" class="verification-input" value="" /><!--
          --><div @click="getcode" :class="{'closeclick':time!='获取验证码'}" class="Verification-code">
                        {{time}}<span v-show="time!='获取验证码'">秒后重新获取</span>
         </div>
 </div>

//模拟实现

js代码

data:{
    time:"获取验证码",
    close:"",
},

methods:{
     getcode(){
         this.time = 60;
         this.close = setInterval(this.gettime,1000);
     },
     gettime(){

     if(this.time == 0){
           //清除js定时器  
           clearInterval(this.close);
           this.time = '获取验证码';
      }else{
            this.time--;
      }
      }
},

//下面是ajax真实数据

//调用获取验证码接口

getcode(){
    if(this.mobile==""){
        mui.toast("手机号码不能为空");
    }else if(!p_mobile.test(this.mobile)){    //正则验证手机号码是否正确
        mui.toast("手机号码错误");
    }else{
        mui.getJSONP(p_pash+'/App/verificCode',
        {
            mobile:this.mobile,//传给后台的数据
        },
        function(data){
            if(data.state==1){     //回调成功    
                v.telcode = data.code;  
                v.time = 60;
                v.close = setInterval(v.gettime,1000);   //每隔1秒执行gettime
            }else{
                mui.toast("信息发送失败");
            }
        },'jsonp');                            
    }
},
gettime(){
    if(this.time == 0){
        //清除js定时器  
        clearInterval(this.close);
        this.time = '获取验证码';
    }else{
        this.time--;
    }
},