vue3 注册登录页面

以下是一个简单的 Vue3 注册登录页面的示例：

<template>
  <div>
    <h2>{{ title }}</h2>
    <form>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" v-model="email" />
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password" />
      </div>
      <div v-if="isRegister">
        <div>
          <label for="confirmPassword">Confirm Password:</label>
          <input type="password" id="confirmPassword" v-model="confirmPassword" />
        </div>
        <div>
          <button type="button" @click="register">Register</button>
        </div>
      </div>
      <div v-else>
        <div>
          <button type="button" @click="login">Login</button>
        </div>
      </div>
    </form>
    <div v-if="errorMessage" style="color: red;">{{ errorMessage }}</div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'LoginForm',
  setup() {
    const title = ref('Login');
    const isRegister = ref(false);
    const email = ref('');
    const password = ref('');
    const confirmPassword = ref('');
    const errorMessage = ref('');

    function login() {
      // TODO: Send login request to backend
    }

    function register() {
      if (password.value !== confirmPassword.value) {
        errorMessage.value = 'Passwords do not match';
        return;
      }

      // TODO: Send register request to backend
    }

    function switchToRegister() {
      isRegister.value = true;
      title.value = 'Register';
    }

    function switchToLogin() {
      isRegister.value = false;
      title.value = 'Login';
    }

    return {
      title,
      isRegister,
      email,
      password,
      confirmPassword,
      errorMessage,
      login,
      register,
      switchToRegister,
      switchToLogin,
    };
  },
};
</script>

该组件包含一个表单，用户可以输入电子邮件和密码进行登录或注册。如果用户选择注册，则必须再次输入密码进行确认。如果密码不匹配，则会显示错误消息。当用户点击登录或注册按钮时，将调用相应的函数，您需要在这些函数中实现向后端发送请求的逻辑。组件还包含两个按钮，用于切换登录和注册表单。

请注意，此示例仅用于演示目的，不包含任何与后端通信的代码。您需要根据您的后端实现来更新此示例。