vue 登录页

<template>
  <div class="login-container">
    <h2>登录页面</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" v-model="username" id="username" required />
      </div>
      <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" v-model="password" id="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);

      // 模拟登录成功后的跳转
      if (this.username === 'admin' && this.password === '123456') {
        alert('登录成功');
        this.$router.push('/dashboard'); // 假设登录成功后跳转到仪表盘页面
      } else {
        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;
}

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;
}
</style>

解释说明：

• 模板部分 (<template>)：定义了一个简单的登录表单，包含用户名和密码的输入框以及一个提交按钮。使用 v-model 绑定输入框的值到组件的数据属性。
• 脚本部分 (<script>)：定义了组件的数据和方法。data 函数返回一个对象，包含 username 和 password 两个属性，用于存储用户输入的值。methods 中定义了 handleLogin 方法，用于处理表单提交事件。这里简单地模拟了登录逻辑，如果用户名为 admin 且密码为 123456，则认为登录成功并跳转到 /dashboard 页面，否则提示错误信息。
• 样式部分 (<style scoped>)：为登录页面添加了一些基本的样式，使表单看起来更美观。scoped 属性确保这些样式只应用于当前组件。