登录(实时验证手机格式、验证码)

思路:
动态验证手机号格式:
	利用计算属性会根据内容的变化而调用的特点,将表单绑定v-model，在
	计算属性中,利用正则不断检验手机格式,正确返回true
	
验证码:
	当手机号格式正确时,点击才有效,利用时间制造三元运算符改变验证码的文本内容,且倒计时期间,再次点击无效

代码示例:

<template>
  <div class='login'>
    <p @click='$router.back()'><</p>

    <div class='md'>
      <p>Jeff外卖</p>
      <div class='linfo'>
      
      //验证手机号
    <div v-show='flag'>
      <div class='mp'>
        <span>手机号</span>
        <input type="text" placeholder="" v-model="phone">
        <span :class='{rphone:right_phone}' @click='getNum'>{{time?'剩下'+time+'秒':'获取验证码'}}</span>
        	//利用time是否为0动态显示内容
        	//利用计算属性,添加符合时的验证码样式
      </div>
      <div class='mp2'>
        <span>验证码</span>
        <input type="text">
      </div>
    </div>





      </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Switch } from 'vant';

  Vue.use(Switch);

  export default{
    data()
    {
      return{
          flag:true,
          checked:false,
          type:'password',
          phone:'',
          time:0, //倒计时
          timeFlag:true  //是否能够再次发送验证码
      }
    },
    methods:{
      getNum()
      {

        if(this.right_phone) //调用计算属性,点击时是否能够触发验证码
        { 
          if(this.timeFlag)  //倒计时期间的旗帜
          {
            this.timeFlag=false;
            this.time=60;
            let timer=setInterval(()=>{

              this.time--;
              if(this.time==0)
              {
                this.timeFlag=true;
                clearInterval(timer);
              }
            },1000)
          }

        }else{
          alert('请输入正确手机号');
        }
      }
    },
    computed:{ //计算属性动态验证手机号,其中手机号v-model双向绑定
      right_phone()
      {
        return /^1\d{10}$/.test(this.phone) //正则匹配是否11个数字,返回布尔值
      }
    }

  }
</script>

<style lang='less'>


    .mlog{
      margin-top: 20px;
      text-align: start;
      .mp{
        width: 100%;
        height: 40px;
        line-height: 40px;
        white-space: nowrap;
        margin-bottom: 20px;
        >span:last-child{
          color:#ccc;
          margin-left: -40px;

        }
        border: solid 1px #ccc;
        >input{
          border: none;
        }
        .rphone{  //手机号格式正确时的验证码样式
          color:black !important;

        }
      }
      

}
</style>

效果图: