帮我用vue写一个学生管理系统的Ui
时间: 2023-07-20 09:25:09 浏览: 44
好的,以下是一个简单的学生管理系统的UI示例代码,使用Vue.js编写:
```html
<template>
<div>
<h1>学生管理系统</h1>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" v-model="student.name">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="number" id="age" v-model="student.age">
</div>
<div class="form-group">
<label for="gender">性别</label>
<select id="gender" v-model="student.gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<div class="form-group">
<button @click="addStudent">添加学生</button>
</div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="(student, index) in students" :key="index">
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.gender }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
student: {
name: "",
age: "",
gender: "male"
},
students: []
};
},
methods: {
addStudent() {
this.students.push(this.student);
this.student = {
name: "",
age: "",
gender: "male"
};
}
}
};
</script>
<style>
.form-group {
margin-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th,
td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
th {
background-color: #eee;
}
</style>
```
这个示例包含了一个表单来添加学生信息,以及一个表格来显示已添加的学生信息。你可以根据你的具体需求来修改和扩展这个UI。