vue实现计算邮箱或密码是否正确的全部代码

在Vue.js中，我们通常会创建一个表单组件，并通过`v-model`指令双向绑定输入字段。对于验证邮箱和密码，可以使用自定义事件或者方法来检查输入内容。下面是一个简单的例子，假设有一个表单组件，包含邮箱和密码输入框：

<template>
  <div>
    <input type="email" v-model="email" placeholder="请输入邮箱" @blur="checkEmailValidity">
    <input type="password" v-model="password" placeholder="请输入密码" @blur="checkPasswordValidity">
    <p :class="{ 'error-message': emailError }">邮箱格式错误</p>
    <p :class="{ 'error-message': passwordError }">密码不能为空</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
      emailError: false,
      passwordError: false,
    };
  },
  methods: {
    checkEmailValidity() {
      const regex = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
      if (!regex.test(this.email)) {
        this.emailError = true;
      } else {
        this.emailError = false;
      }
    },
    
    checkPasswordValidity() {
      if (this.password.trim() === '') {
        this.passwordError = true;
      } else {
        this.passwordError = false;
      }
    },
  },
};
</script>

<style scoped>
.error-message {
  color: red;
}
</style>

在这个示例中，当用户离开邮箱输入框时(`@blur`)，`checkEmailValidity`方法会被调用，检查邮箱格式是否正确；同样，离开密码输入框时，`checkPasswordValidity`方法检查密码是否为空。