用vue写一个登陆界面
时间: 2024-05-05 07:17:58 浏览: 10
好的,以下是使用 Vue.js 编写一个简单的登录页面的示例代码:
```html
<template>
<div class="login-form">
<h1>Login</h1>
<form @submit.prevent="submit">
<label for="username">Username:</label>
<input type="text" id="username" v-model="username">
<label for="password">Password:</label>
<input type="password" id="password" v-model="password">
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
submit() {
// TODO: Submit login credentials to server.
}
}
}
</script>
<style>
.login-form {
max-width: 400px;
margin: auto;
}
h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
}
input[type=text], input[type=password] {
padding: 0.5rem;
border-radius: 4px;
border: 1px solid #ccc;
margin-bottom: 1rem;
}
button {
background-color: blue;
color: #fff;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #0066cc;
}
</style>
```
在这个示例代码中,我们使用 Vue.js 框架来构建一个简单的登录表单,并在用户点击“登录”按钮时,会触发 submit 方法。这里只是简单的示例代码,你需要在 submit 方法中添加逻辑以将用户输入的用户名和密码提交给服务器进行验证。