vue.js单击按钮获取手机验证码，倒计时禁用按钮功能效果

html部分

我是用vue+elment框架做的；

<el-button type="primary"  :disabled="disabled" @click="sendcode">
    {{btntxt}}
</el-button>

js部分

...
 data() {
      return {
          btntxt:"获取验证码",
          disabled:false,
          time:0,
     }
},
methods: {
//验证手机号码部分
        sendcode:function(){
            var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;
            if(this.ruleForm.phone==''){
                alert("请输入手机号码");
                return;
            }
            this.time=35;
            this.disabled=true;
            this.timer();
            axios.post(url).then(
                res=>{
                    this.phonedata=res.data;
                }
            )
        },
         timer:function () {
             if (this.time > 0) {
                 this.time--;
//                 console.log(this.time);
                 this.btntxt=this.time+"s,后重新获取验证码";
                 setTimeout(this.timer, 1000);
             } else{
                 this.time=0;
                 this.btntxt="获取验证码";
                 this.disabled=false;
             }
         }
}
...

以上就是单击按钮获取验证码倒计时效果的效果，如果在参考过程中出现错误，请在下方留言，我会及时更改，非常感谢！