使用vue编写一个登陆界面
时间: 2024-02-16 08:00:46 浏览: 94
Vue实验一源代码:登陆界面
好的,以下是使用 Vue 编写一个登陆界面的示例代码:
```html
<template>
<div class="login">
<h1>登陆</h1>
<form>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" name="username" v-model="username" placeholder="请输入用户名" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" name="password" v-model="password" placeholder="请输入密码" required>
</div>
<button type="button" @click="login">登陆</button>
</form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
username: "",
password: "",
};
},
methods: {
login() {
// 在这里编写登陆逻辑
},
},
};
</script>
<style>
.login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
label {
margin-bottom: 5px;
}
input {
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
width: 200px;
}
button {
padding: 5px 20px;
border: none;
border-radius: 3px;
background-color: #007aff;
color: #fff;
cursor: pointer;
}
</style>
```
这是一个简单的登陆界面,包含用户名和密码两个输入框以及一个登陆按钮。在 `login` 方法中,你可以编写实际的登陆逻辑,例如向后端发送请求验证用户名和密码是否正确。
阅读全文