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() {
      // 这里可以添加登录逻辑，例如调用 API 验证用户名和密码
      console.log('用户名:', this.username);
      console.log('密码:', this.password);
      // 假设验证成功后跳转到主页
      this.$router.push('/home');
    }
  }
};
</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: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>

解释说明

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

   • 包含了一个简单的登录表单，有两个输入框（用户名和密码）和一个提交按钮。
   • 使用了 v-model 指令将输入框的值绑定到组件的数据属性 username 和 password。

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

   • 定义了两个数据属性 username 和 password，用于存储用户输入的值。
   • 定义了一个方法 handleLogin，当用户点击登录按钮时会触发这个方法。在这个方法中，你可以添加实际的登录逻辑，比如调用 API 验证用户名和密码。这里只是简单地打印了用户名和密码，并模拟了一个跳转到主页的操作。

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

   • 添加了一些基本的样式来美化登录页面，包括容器的宽度、边距、内边距、边框等。
   • 为按钮添加了背景颜色、文本颜色、圆角等样式，并设置了悬停效果。