举例:【实践题】使用「computed」对对象数组的某属性(例如:成绩)进行【排序输出】
时间: 2023-08-05 12:05:01 浏览: 88
JS实现json对象数组按对象属性排序操作示例
好的,我理解了你的问题。这是一个关于如何使用 Vue.js 中的 computed 属性对对象数组进行排序并输出的实践题。
首先,我们需要一个包含学生信息的对象数组,每个学生对象包含姓名和成绩两个属性:
```
data() {
return {
students: [
{ name: '张三', score: 90 },
{ name: '李四', score: 80 },
{ name: '王五', score: 70 },
{ name: '赵六', score: 60 }
]
}
}
```
我们希望按照成绩从高到低的顺序对学生数组进行排序输出,这时候就可以使用 Vue.js 中的 computed 属性来实现。
我们可以在 Vue 实例中定义一个 computed 属性,名为 sortedStudents,使用 JavaScript 的 sort() 方法对学生数组进行排序,并返回排序后的数组:
```
computed: {
sortedStudents() {
return this.students.sort((a, b) => b.score - a.score)
}
}
```
这里我们使用了 sort() 方法,传入一个比较函数,比较函数根据学生的成绩进行排序,成绩高的在前面,成绩低的在后面。
最后,我们可以在模板中使用 sortedStudents 属性来输出排序后的学生数组:
```
<template>
<div>
<div v-for="student in sortedStudents" :key="student.name">
{{ student.name }}: {{ student.score }}
</div>
</div>
</template>
```
这样就可以按照成绩从高到低的顺序输出学生数组了。
阅读全文