使用vue写一个用户登录页面
时间: 2023-09-08 07:09:56 浏览: 37
好的,下面是一个简单的用户登录页面的Vue代码示例:
```
<template>
<div class="login-container">
<h2>用户登录</h2>
<form @submit.prevent="login">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" required>
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 发送登录请求
// 这里可以使用axios等库发送登录请求
// 登录成功后,可以跳转到其他页面,例如首页
}
}
}
</script>
<style scoped>
.login-container {
width: 400px;
margin: auto;
text-align: center;
}
.form-group {
margin: 10px 0;
}
label {
display: inline-block;
width: 80px;
text-align: right;
}
input {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
</style>
```
这个登录页面包含一个用户名和密码的输入框,以及一个登录按钮。当用户点击登录按钮时,会触发`login`方法,可以在该方法中发送登录请求。请注意,这里只是一个简单的示例,实际情况下应该对用户输入的用户名和密码进行验证,例如是否为空、是否符合规定的格式、是否匹配等。