vue3登录界面

<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>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const username = ref('');
    const password = ref('');
    const router = useRouter();

    const handleLogin = () => {
      // 这里可以添加验证逻辑，比如检查用户名和密码是否正确
      console.log('用户名:', username.value);
      console.log('密码:', password.value);

      // 假设登录成功后跳转到主页
      router.push('/');
    };

    return {
      username,
      password,
      handleLogin,
    };
  },
};
</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>)：定义了登录界面的HTML结构。包含一个表单，用户可以在其中输入用户名和密码，并提交表单。
• 脚本部分 (<script>)：使用Vue 3的组合式API (setup 函数) 来管理组件的状态和行为。ref 用于创建响应式的 username 和 password 变量，useRouter 用于处理页面导航。handleLogin 方法处理表单提交事件，模拟登录逻辑并跳转到主页。
• 样式部分 (<style scoped>)：为登录界面添加了一些基本的CSS样式，确保界面美观且易于使用。