使用vue2设计一个好看的新增用户信息列表ui
时间: 2024-05-16 16:14:09 浏览: 6
好的,我可以为您提供一个简单的示例代码:
```html
<template>
<div class="user-form">
<h2>Add User</h2>
<form>
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" id="firstName" v-model="user.firstName" required>
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" v-model="user.lastName" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" v-model="user.email" required>
</div>
<div class="form-group">
<button type="submit" @click.prevent="addUser">Add User</button>
</div>
</form>
<div class="user-list">
<h2>User List</h2>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users" :key="index">
<td>{{ user.firstName }}</td>
<td>{{ user.lastName }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: {
firstName: '',
lastName: '',
email: ''
},
users: []
}
},
methods: {
addUser() {
this.users.push(this.user)
this.user = {
firstName: '',
lastName: '',
email: ''
}
}
}
}
</script>
<style>
.user-form {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
}
.user-form h2 {
margin: 0 0 20px;
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.form-group label {
margin-bottom: 5px;
}
.form-group input {
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form-group button {
padding: 10px 20px;
border-radius: 5px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
.user-list {
margin-top: 40px;
}
.user-list h2 {
margin: 0 0 20px;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 10px;
border-bottom: 1px solid #ccc;
}
th:first-child,
td:first-child {
width: 30%;
}
</style>
```
这个示例包含一个表单用于新增用户信息,以及一个表格用于展示已添加的用户信息。CSS 样式基本实现了美观的效果,您可以根据自己的需求进行调整。