vue语言写一个登录页面
时间: 2023-08-02 13:19:10 浏览: 33
好的,以下是一个简单的登录页面的Vue代码示例:
```html
<template>
<div class="login-container">
<h1>用户登录</h1>
<form>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" placeholder="请输入密码">
</div>
<button type="submit" class="login-btn" @click.prevent="handleSubmit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleSubmit() {
// 处理登录逻辑
// 发送请求到服务器进行验证
// ...
}
}
}
</script>
<style scoped>
.login-container {
max-width: 400px;
margin: 0 auto;
text-align: center;
}
.form-group {
margin-bottom: 20px;
text-align: left;
}
label {
display: inline-block;
width: 80px;
}
input[type="text"],
input[type="password"] {
width: 240px;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.login-btn {
display: inline-block;
padding: 8px 16px;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
```
这个页面包括一个简单的表单,包含用户名和密码的输入框,以及一个登录按钮,当用户点击登录按钮时,会触发 `handleSubmit` 方法,可以在该方法中处理登录逻辑,例如发送登录请求到服务器进行验证等操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)