用vue写一个学生信息管理系统
时间: 2023-05-21 19:07:10 浏览: 60
好的,以下是一个简单的Vue.js实现的学生信息管理系统的代码示例。
```
<template>
<div>
<h2>学生信息表</h2>
<table>
<thead>
<tr>
<th>学生姓名</th>
<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.major}}</td>
<td>
<button @click="edit(student)">编辑</button>
<button @click="deleteStudent(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<h2>添加学生信息</h2>
<form @submit.prevent="addStudent">
<label>
学生姓名:
<input type="text" v-model="newStudent.name" required>
</label>
<br>
<label>
学生年龄:
<input type="number" v-model="newStudent.age" required>
</label>
<br>
<label>
学生专业:
<input type="text" v-model="newStudent.major" required>
</label>
<br>
<button type="submit">添加</button>
</form>
<h2>编辑学生信息</h2>
<form v-if="showEditForm" @submit.prevent="updateStudent">
<label>
学生姓名:
<input type="text" v-model="selectedStudent.name" required>
</label>
<br>
<label>
学生年龄:
<input type="number" v-model="selectedStudent.age" required>
</label>
<br>
<label>
学生专业:
<input type="text" v-model="selectedStudent.major" required>
</label>
<br>
<button type="submit">更新</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
students: [
{
name: '张三',
age: 18,
major: '计算机科学',
},
{
name: '李四',
age: 20,
major: '软件工程',
},
{
name: '王五',
age: 22,
major: '数据科学',
},
],
newStudent: {
name: '',
age: '',
major: '',
},
showEditForm: false,
selectedStudent: null,
};
},
methods: {
addStudent() {
this.students.push(this.newStudent);
this.newStudent = {
name: '',
age: '',
major: '',
};
},
edit(student) {
this.showEditForm = true;
this.selectedStudent = student;
},
updateStudent() {
this.showEditForm = false;
this.selectedStudent = null;
},
deleteStudent(index) {
this.students.splice(index, 1);
},
},
};
</script>
```
这个应用程序使用了Vue.js和基本的HTML和CSS来实现一个简单的学生信息管理系统。 它允许用户添加学生信息,编辑学生信息和删除学生信息。