给我一个vue的登录页面
时间: 2023-08-04 16:22:52 浏览: 32
好的,下面是一个简单的Vue登录页面的代码:
```vue
<template>
<div class="login-wrapper">
<h1>Login</h1>
<form @submit.prevent="login">
<label>
Username:
<input v-model="username" type="text" placeholder="Enter your username" required>
</label>
<label>
Password:
<input v-model="password" type="password" placeholder="Enter your password" required>
</label>
<button type="submit">Log In</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 发送登录请求,根据返回结果进行相应处理
// 可以使用axios等库发送请求
// 示例代码:
axios.post('/api/login', {
username: this.username,
password: this.password
})
.then(response => {
// 登录成功,跳转到首页或其他页面
this.$router.push('/home')
})
.catch(error => {
// 登录失败,显示错误信息
alert('Login failed: ' + error.message)
})
}
}
}
</script>
<style>
.login-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
}
input[type="text"],
input[type="password"] {
padding: 0.5rem;
font-size: 1rem;
border-radius: 0.5rem;
border: 1px solid #ccc;
width: 100%;
margin-bottom: 1rem;
}
button[type="submit"] {
padding: 0.5rem 1rem;
font-size: 1rem;
border-radius: 0.5rem;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0069d9;
}
</style>
```
注意:该代码仅供参考,需要根据具体情况进行调整和优化。另外,这里使用了axios库发送请求,需要先安装该库并引入。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)