<template>
<div class="login-container">
<h1>Login</h1>
<form @submit.prevent="login">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="loginForm.username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="loginForm.password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const loginForm = reactive({
username: '',
password: ''
});
function login() {
// 这里应该是登录逻辑,比如发送请求到服务器验证用户名和密码
console.log('Login with:', loginForm);
// 登录成功后的逻辑,例如:localStorage.setItem('user', JSON.stringify(loginForm));
}
return {
loginForm,
login
};
}
};
</script>
<style scoped>
.login-container {
width: 300px;
margin: auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form div {
margin: 10px 0;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 8px;
margin-top: 2px;
}
button[type="submit"] {
width: 100%;
padding: 10px;
margin-top: 10px;
cursor: pointer;
}
</style>