Vue-增加、删除、查询数据并在页面中显示(包含数组的filter方法)

本文介绍了如何在Vue应用中利用filter方法进行数据的增删查操作,详细讲解了如何通过回调函数筛选满足特定条件的数组元素,并将其在页面上展示。
摘要由CSDN通过智能技术生成
<div id="app">
	<label>
		Id:
		<input type="text" v-model="id" />
	</label>
	
	<label>
		品牌:
		<input type="text" v-model="name" />
	</label>
	
	<button type="button" @click="add">添加</button>
	
	<br />
	<label>
		根据品牌名称搜索:
		<input 
这个问题需要用到Vue.js的基础知识,包括组件、数据绑定、事件绑定等。我会提供一个简单的实现思路,你可以根据自己的实际情况进行修改和完善。 假设你已经有一个包含所有学生信息数组students,每个学生信息包含姓名和班级信息。还有一个课程数组courses,每个课程信息包含课程名称和课程成绩。我们需要在Vue创建一个组件来实现添加和删除成绩的功能。 首先,在组件的data属性定义一个数组scores,用来存储每个学生的成绩信息。scores数组的每个元素都是一个对象,包含课程名称、成绩和平均分三个属性。 然后,在组件的template模板使用v-for指令遍历scores数组显示每个学生的成绩信息。同时,使用v-if指令判断课程数组courses是否为空,如果为空则提示无课程可选。 接下来,我们需要实现添加成绩和删除成绩的功能。添加成绩可以通过点击“添加成绩”按钮来实现,每次从课程数组courses随机选择一门课程添加成绩,并将该门课程从课程数组删除删除成绩可以通过点击每个学生的“删除”按钮来实现,将该门课程重新添加到课程数组。 最后,我们需要计算每个学生的平均分,并显示页面上。这可以通过Vue的计算属性来实现,每次scores数组发生变化时,计算平均分并更新页面显示。 下面是一个简单的实现代码: ``` <template> <div> <h2>学生成绩列表</h2> <table> <thead> <tr> <th>姓名</th> <th>班级</th> <th>课程名称</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(score, index) in scores" :key="index"> <td>{{ score.name }}</td> <td>{{ score.class }}</td> <td>{{ score.course }}</td> <td>{{ score.grade }}</td> <td><button @click="deleteScore(index)">删除</button></td> </tr> <tr v-if="courses.length === 0"> <td colspan="5">无课程可选</td> </tr> </tbody> </table> <button @click="addScore">添加成绩</button> </div> </template> <script> export default { data() { return { courses: [ { name: '语文', grades: [] }, { name: '数学', grades: [] }, { name: '英语', grades: [] }, { name: '物理', grades: [] }, { name: '化学', grades: [] }, ], students: [ { name: '张三', class: '一班' }, { name: '李四', class: '一班' }, { name: '王五', class: '二班' }, { name: '赵六', class: '二班' }, ], scores: [], }; }, methods: { addScore() { if (this.courses.length === 0) { alert('无课程可选'); return; } const student = this.students[Math.floor(Math.random() * this.students.length)]; const course = this.courses[Math.floor(Math.random() * this.courses.length)]; const grade = Math.floor(Math.random() * 101); course.grades.push(grade); this.courses = this.courses.filter(c => c.grades.length > 0); this.scores.push({ name: student.name, class: student.class, course: course.name, grade, }); }, deleteScore(index) { const score = this.scores[index]; const course = this.courses.find(c => c.name === score.course); course.grades = course.grades.filter(g => g !== score.grade); if (!this.courses.includes(course)) { this.courses.push(course); } this.scores.splice(index, 1); }, }, computed: { average() { const result = {}; for (let i = 0; i < this.scores.length; i++) { const score = this.scores[i]; if (!result[score.name]) { result[score.name] = {}; } if (!result[score.name][score.course]) { result[score.name][score.course] = { grades: [], average: 0, }; } result[score.name][score.course].grades.push(score.grade); } for (const name in result) { for (const course in result[name]) { const grades = result[name][course].grades; result[name][course].average = grades.reduce((a, b) => a + b, 0) / grades.length; } } return result; }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值