设计一个漂亮vue登录页面
时间: 2023-06-13 14:02:34 浏览: 84
好的,我可以给你提供一个简单的Vue登录页面示例。
首先,你需要创建一个 Vue 组件,可以将其命名为 Login.vue。在该组件中,你需要添加一个表单,该表单包含用户名和密码输入框、登录按钮以及其他必要的元素。
下面是一个简单的 Login.vue 组件示例:
```html
<template>
<div class="login">
<h1>Login</h1>
<form v-on:submit.prevent="login">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" v-model="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// TODO: Implement login functionality
}
}
}
</script>
<style>
.login {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border-radius: 5px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
button[type=submit] {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button[type=submit]:hover {
background-color: #3e8e41;
}
</style>
```
这个组件包含一个表单,该表单有两个输入框,一个登录按钮和一些CSS样式。在这个组件中,我们使用了 `v-model`指令来绑定输入框的值到组件的数据属性上,使用 `v-on:submit.prevent` 指令来阻止表单默认提交的行为,并使用 `methods` 选项来定义一个 `login` 方法来处理登录逻辑。
这只是一个简单的示例,你可以根据你的需求对其进行修改和扩展。