Vue.js 学生管理系统：使用 v-for 实现添加和删除学生功能
根据你的描述，以下是使用 v-for 实现你所需页面效果的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生管理系统</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>学生管理系统</h1>
<form @submit.prevent="addStudent">
<div>
<label>班级：</label>
<input type="text" v-model="newStudent.class">
</div>
<div>
<label>姓名：</label>
<input type="text" v-model="newStudent.name">
</div>
<div>
<label>性别：</label>
<input type="text" v-model="newStudent.gender">
</div>
<div>
<label>年龄：</label>
<input type="number" v-model="newStudent.age">
</div>
<button type="submit">添加学生</button>
</form>
<ul>
<li v-for="(student, index) in students" :key="index">
<div>班级：{{ student.class }}</div>
<div>姓名：{{ student.name }}</div>
<div>性别：{{ student.gender }}</div>
<div>年龄：{{ student.age }}</div>
<button @click="removeStudent(index)">删除学生</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
students: [],
newStudent: {
class: "",
name: "",
gender: "",
age: ""
}
},
methods: {
addStudent() {
this.students.push({
class: this.newStudent.class,
name: this.newStudent.name,
gender: this.newStudent.gender,
age: this.newStudent.age
});
this.newStudent = {
class: "",
name: "",
gender: "",
age: ""
};
},
removeStudent(index) {
this.students.splice(index, 1);
}
}
});
</script>
</body>
</html>
在这个示例中，我创建了一个简单的学生管理系统页面。使用表单输入学生的班级、姓名、性别和年龄，点击“添加学生”按钮可以将学生对象添加到 students 数组中。使用 v-for 循环遍历 students 数组并显示学生的信息，每个学生信息后面附有一个“删除学生”按钮，点击该按钮可以删除对应的学生。
请确保你已经正确引入了 Vue.js 文件，并将其放置在与你的 HTML 文件相同的目录下。保存修改后的代码，并加载网页以查看结果。
原文地址: https://www.cveoy.top/t/topic/nSK 著作权归作者所有。请勿转载和采集!