用vue实现一个登录页面
时间: 2023-10-29 13:06:35 浏览: 26
以下是使用Vue实现一个简单的登录页面的示例代码:
```
<template>
<div class="login-form">
<h2>Login</h2>
<form @submit.prevent="login">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" v-model="username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" v-model="password">
</div>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
login() {
// 实现登录逻辑
console.log(`Username: ${this.username}, Password: ${this.password}`);
},
},
};
</script>
<style>
.login-form {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
}
h2 {
text-align: center;
}
.form-group {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 80px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 3px;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
```
在这个示例中,我们使用了Vue的模板语法来创建一个简单的登录表单。表单中包含了两个输入框和一个登录按钮,输入框的值通过v-model指令绑定到了组件实例的data属性中,这样我们就可以在登录方法中获取到输入框的值。
在登录方法中,我们可以实现具体的登录逻辑,例如向服务器发送登录请求等。在这个示例中,我们只是简单地将输入框的值输出到控制台中。
最后,我们还定义了一些样式来美化登录表单,包括设置表单的宽度、边框、字体等。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)