vue写一个学生信息有增删改查的项目
时间: 2023-06-19 08:10:03 浏览: 65
好的,以下是一个简单的示例:
首先,创建一个 Vue 组件 `StudentManagement.vue`:
```html
<template>
<div>
<h1>学生信息管理</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="student in students" :key="student.id">
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.gender }}</td>
<td>{{ student.age }}</td>
<td>
<button @click="editStudent(student)">编辑</button>
<button @click="deleteStudent(student.id)">删除</button>
</td>
</tr>
</tbody>
</table>
<button @click="addStudent">添加学生</button>
<div v-if="showModal">
<h2>{{ modalTitle }}</h2>
<form @submit.prevent="submitStudent">
<label>学号</label>
<input type="text" v-model="form.id" :disabled="editing"/>
<label>姓名</label>
<input type="text" v-model="form.name"/>
<label>性别</label>
<select v-model="form.gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
<label>年龄</label>
<input type="number" v-model="form.age"/>
<button type="submit">{{ modalButton }}</button>
<button type="button" @click="closeModal">取消</button>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
students: [
{ id: '001', name: '张三', gender: '男', age: 18 },
{ id: '002', name: '李四', gender: '女', age: 20 },
{ id: '003', name: '王五', gender: '男', age: 22 },
],
showModal: false,
modalTitle: '',
modalButton: '',
editing: false,
form: {
id: '',
name: '',
gender: '男',
age: '',
},
};
},
methods: {
addStudent() {
this.editing = false;
this.form = {
id: '',
name: '',
gender: '男',
age: '',
};
this.modalTitle = '添加学生';
this.modalButton = '添加';
this.showModal = true;
},
editStudent(student) {
this.editing = true;
this.form = {
id: student.id,
name: student.name,
gender: student.gender,
age: student.age,
};
this.modalTitle = '编辑学生';
this.modalButton = '保存';
this.showModal = true;
},
deleteStudent(id) {
this.students = this.students.filter(student => student.id !== id);
},
submitStudent() {
if (this.editing) {
const index = this.students.findIndex(student => student.id === this.form.id);
this.students.splice(index, 1, this.form);
} else {
this.students.push(this.form);
}
this.showModal = false;
},
closeModal() {
this.showModal = false;
},
},
};
</script>
```
这个组件包括一个表格,用于展示学生信息,以及添加、编辑、删除学生的功能。
接下来,在 `main.js` 中注册组件:
```javascript
import Vue from 'vue';
import StudentManagement from './StudentManagement.vue';
new Vue({
el: '#app',
render: h => h(StudentManagement),
});
```
最后,在 `index.html` 中添加一个用于渲染组件的 `<div>`:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生信息管理</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./main.js"></script>
</body>
</html>
```
现在打开浏览器,就可以看到一个包含增删改查学生信息的页面了。