vue用watch监听表单数据变化

Demo

<template>
   <div class="login">
     <div class="login-header">
       <router-link to="/">
          <span class="iconfont back-ico">&#xe624;</span>
       </router-link>
       <div class="login-font">
         登录
       </div>
      <router-link to="/register" class="rigester" tag="div">
         注册
      </router-link>
     </div>
     <div class="login-detail">
       <div class="detail">
         <div class="left-detail" :class="{ newClass: isActiveOne }" @click="toggleClassOne">短信验证码登录</div>
         <div class="right-detail" :class="{ newClass: isActiveTwo }" @click="toggleClassTwo">账号登录</div>
       </div>
     </div>
     <div class="aform">
       <div class="out" v-show="isActiveOne">
        <el-form
        label-width="60px"
        :model="formLabelAlign"
        :label-position="labelPosition">
            <el-form-item label="手机号" class="ko">
              <el-input v-model="formLabelAlign.phoneNumber" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="验证码" class="kk">
              <el-input v-model="formLabelAlign.yzm" placeholder="请输入验证码"></el-input>
              <el-button size="medium" class="el-button-yzm">获取验证码</el-button>
            </el-form-item>
          </el-form>
      </div>
       <div class="out" v-show="isActiveTwo">
        <el-form label-width="60px" :model="formLabelAlign" :label-position="labelPosition">
            <el-form-item label="账号" class="ko">
              <el-input v-model="formLabelAlign.username" placeholder="手机号/邮箱/用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="formLabelAlign.pass" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-form>
      </div>
     </div>
      <div class="myBtn">
        <el-button type="primary" :class="{trueColor:isTrueColor}" :disabled="isDisabled">登录</el-button>
      </div>
      <p>
        <router-link to="/">找回密码</router-link>
      </p>
   </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'Header',
  data () {
    return {
      isActiveOne: true,
      isActiveTwo: false,
      isTrueColor: false,
      labelPosition: 'left',
      isDisabled: true,
      formLabelAlign: {
        phoneNumber: '',
        yzm: '',
        username: '',
        pass: ''
      },
      rules: ''
    }
  },
  methods: {
    toggleClassOne () {
      this.isActiveOne = true
      this.isActiveTwo = false
      this.isDisabled = true
      this.isTrueColor = false
      if ((this.formLabelAlign.phoneNumber.length === 11 && this.formLabelAlign.yzm.length >= 4)) {
        this.isTrueColor = true
        this.isDisabled = false
      } else {
        this.isTrueColor = false
        this.isDisabled = true
      }
    },
    toggleClassTwo () {
      this.isActiveTwo = true
      this.isActiveOne = false
      this.isDisabled = true
      this.isTrueColor = false
      if ((this.formLabelAlign.username.length > 0 && this.formLabelAlign.pass.length > 0)) {
        this.isTrueColor = true
        this.isDisabled = false
      } else {
        this.isTrueColor = false
        this.isDisabled = true
      }
    }
  },
  watch: {
    formLabelAlign: {
      handler: function (val) {
        if ((val.phoneNumber.length === 11 && val.yzm.length === 6) || (val.username.length > 0 && val.pass.length > 0)) {
          this.isTrueColor = true
          this.isDisabled = false
        } else {
          this.isTrueColor = false
          this.isDisabled = true
        }
      },
      deep: true //对象的深度验证
    },
    'formLabelAlign.pass': function (val) { //单个数据验证
      console.log(val)
    }
  }
}
</script>