vue 登录页面

<template>
  <div class="login-container">
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      // 这里可以添加登录逻辑，比如发送请求到服务器验证用户信息
      console.log('用户名:', this.username);
      console.log('密码:', this.password);
      // 模拟登录成功后的跳转或其他操作
      alert('登录成功');
    }
  }
};
</script>

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

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

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

button:hover {
  background-color: #45a049;
}
</style>

解释说明：

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

   • 创建了一个简单的登录表单，包含用户名和密码的输入框以及一个提交按钮。
   • 使用 v-model 绑定输入框的值到组件的数据属性 username 和 password。

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

   • 定义了两个数据属性 username 和 password，用于存储用户输入的值。
   • handleLogin 方法处理表单提交事件，这里简单地打印出用户名和密码，并弹出一个提示框表示登录成功。实际应用中，这里应该发送 AJAX 请求到服务器进行身份验证。

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

   • 添加了一些基本的样式来美化登录页面，包括表单容器、输入框和按钮的样式。
   • 使用了 scoped 属性确保这些样式只应用于当前组件。