vue编写登录注册页面

<template>
  <div class="auth-page">
    <h2>{{ isLogin ? '登录' : '注册' }}</h2>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="email">邮箱</label>
        <input
          type="email"
          id="email"
          v-model="email"
          required
        />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input
          type="password"
          id="password"
          v-model="password"
          required
        />
      </div>
      <div v-if="!isLogin" class="form-group">
        <label for="confirm-password">确认密码</label>
        <input
          type="password"
          id="confirm-password"
          v-model="confirmPassword"
          required
        />
      </div>
      <button type="submit">{{ isLogin ? '登录' : '注册' }}</button>
      <p @click="toggleMode">{{ isLogin ? '没有账号？点击注册' : '已有账号？点击登录' }}</p>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
      confirmPassword: '',
      isLogin: true,
    };
  },
  methods: {
    toggleMode() {
      this.isLogin = !this.isLogin;
    },
    handleSubmit() {
      if (this.isLogin) {
        // 登录逻辑
        console.log('正在登录...');
        console.log('邮箱:', this.email);
        console.log('密码:', this.password);
      } else {
        // 注册逻辑
        if (this.password !== this.confirmPassword) {
          alert('两次输入的密码不一致');
          return;
        }
        console.log('正在注册...');
        console.log('邮箱:', this.email);
        console.log('密码:', this.password);
      }
    },
  },
};
</script>

<style scoped>
.auth-page {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

p {
  text-align: center;
  margin-top: 10px;
  cursor: pointer;
  color: #4CAF50;
}

p:hover {
  text-decoration: underline;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了 Vue 的双大括号语法 {{ }} 来动态显示文本。
   • 表单元素通过 v-model 指令与组件数据进行双向绑定。
   • 根据 isLogin 的值，动态切换表单的标题和按钮文字。
   • 提供了一个切换模式的功能（登录/注册），通过点击段落文本来触发。

2. 脚本部分 (<script>):

   • 定义了组件的数据属性 email, password, confirmPassword, 和 isLogin。
   • toggleMode 方法用于切换登录和注册模式。
   • handleSubmit 方法处理表单提交事件。根据 isLogin 的值，分别执行登录或注册逻辑，并进行简单的验证。

3. 样式部分 (<style scoped>):

   • 使用了简单的 CSS 样式来美化页面，确保表单在视觉上更加友好。
   • scoped 属性确保这些样式只应用于当前组件。