用vue怎么做一个短信验证码？实例展示

短信验证码，在登陆注册的页面非常常见，也非常简单
1，先上两张效果图


2，html代码

      获取验证码
      {{codeTime}}秒后重新获取

sendAuthCode控制按钮中文字的变化，codeTime控制倒计时变化，都在data中定义，

sendAuthCode:true,
codeTime:0,

然后写getCode方法

getCode(){
        console.log(this.ruleForm.phone);
        axios.get('/api/v1.0/user/smsCode/', {
          params: {mobile: this.ruleForm.phone}
        }).then((response) => {
          if (response.status === 200) {
            this.sendAuthCode=false;
            this.codeTime = 60;
            var codeTimeTimer =  setInterval(()=>{
              this.codeTime--;
              if(this.codeTime<=0){
                this.sendAuthCode = true;
                clearInterval(codeTimeTimer);
              }
            }, 1000);
          }
        }).catch(error=>{

this.ruleForm.phone是你要传给后台的手机号，不会post传参的请看我另一篇博文
vue中axios各种传参方法
发现什么问题请给我留言，咱们一起菜鸡互啄
好了效果完成，css就不码了 各自有各自的样式