Vue

（1）首先进行HTML的编写，如下：

<span>用户名：</span>
<input type="text" v-model="usernameModel" placeholder="请输入用户名">
<span>{{ userErrors.errorText }}</span>

<span class="g-form-label">密码：</span>
<input type="password" v-model="passwordModel" placeholder="请输入密码">
<span class="g-form-error">{{ passwordErrors.errorText }}</span>

<a class="button" @click="onLogin">登录</a>

<p>{{ errorText }}</p>

（2）然后进行data的编写，如下：

data () {
  return {
    usernameModel: '',
    passwordModel: '',
    errorText: ''
}

（3）然后进行conputed属性的编写；即： 

computed:{
     userErrors () {
    let errorText, status
    if (!/@/g.test(this.usernameModel)) {
      status = false
      errorText = '不包含@'
    }
    else {
      status = true
      errorText = ''
    }
    if (!this.userFlag) {
      errorText = ''
      this.userFlag = true
    }
    return {
      status,
      errorText
    }
  },
  passwordErrors () {
    let errorText, status
    if (!/^\w{1,6}$/g.test(this.passwordModel)) {
      status = false
      errorText = '密码不是1-6位'
    }
    else {
      status = true
      errorText = ''
    }
    if (!this.passwordFlag) {
      errorText = ''
      this.passwordFlag = true
    }
    return {
      status,
      errorText
    }
  }
}

（4）最后进行onLogin()方法的编写，即：

methods: {
  onLogin () {
    if (!this.userErrors.status || !this.passwordErrors.status) {
      this.errorText = '部分选项未通过'
    }
    else {
      this.errorText = ''
      this.$http.get('api/login') //$http已经不建议使用了，建议使用axios,即改成axios.get()方法。
      .then((res) => {
        this.$emit('has-log', res.data)
      }, (error) => {
        console.log(error)
      })
    }
  }
}