帮我用vue写个登录页
时间: 2023-07-27 13:26:13 浏览: 30
好的,以下是一个简单的 Vue 登录页示例:
```html
<template>
<div class="login-container">
<form class="login-form" @submit.prevent="login">
<h2>用户登录</h2>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" v-model="username">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" v-model="password">
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 这里可以使用 axios 或其他 HTTP 库发送登录请求
console.log(`用户名:${this.username},密码:${this.password}`)
}
}
}
</script>
<style>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form {
border: 1px solid #ccc;
padding: 20px;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
text-align: center;
}
.form-group {
margin: 10px 0;
}
label {
display: block;
}
input[type="text"],
input[type="password"] {
padding: 5px;
border-radius: 4px;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
}
button[type="submit"] {
background-color: #007bff;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
</style>
```
这个示例中,我们使用了一个表单来接收用户的用户名和密码,然后在提交表单时调用 `login` 方法,将用户名和密码打印到控制台。你可以根据自己的需求来修改这个示例。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)