创建一个vue3的登录页面
时间: 2023-08-03 10:57:14 浏览: 48
当然!下面是一个简单的示例代码,展示了如何创建一个 Vue 3 的登录页面:
```html
<template>
<div class="login-container">
<h1>Login</h1>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Username" />
<input type="password" v-model="password" placeholder="Password" />
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'Login',
setup() {
const username = ref('');
const password = ref('');
const login = () => {
// 在这里处理登录逻辑
console.log('Username:', username.value);
console.log('Password:', password.value);
};
return {
username,
password,
login,
};
},
};
</script>
<style>
.login-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input {
margin-bottom: 10px;
padding: 5px;
}
button {
padding: 5px 10px;
}
</style>
```
这是一个基本的登录页面,包含用户名和密码输入框以及提交按钮。你可以在`login`方法中处理实际的登录逻辑。请根据你的需求进行修改和完善。希望对你有所帮助!