Vue에서 그룹화된 목록을 구현하는 방법
- 王林원래의
- 2023-11-07 14:06:161398검색
Vue에서 그룹화된 목록을 구현하는 방법
Vue는 사용자 인터페이스 구축을 위한 진보적인 JavaScript 프레임워크입니다. 단순성과 사용 용이성으로 Vue는 프런트엔드 개발에서 인기 있는 선택이 되었습니다. 실제 개발에서는 데이터를 분류하고 그룹화하여 인터페이스에 목록 형식으로 표시해야 하는 경우가 많습니다. 이 기사에서는 Vue에서 그룹화된 목록을 구현하는 방법을 소개하고 참조용 특정 코드 예제를 제공합니다.
- 데이터 준비
먼저, 그룹화된 목록의 효과를 보여주기 위해 몇 가지 테스트 데이터를 준비해야 합니다. 학생 목록이 있고 각 학생은 이름과 수업이라는 두 가지 속성을 포함한다고 가정합니다. 우리의 목표는 학생들을 학급별로 그룹화하여 학생들을 같은 그룹 내의 같은 학급에 배치하는 것입니다.
data() {
return {
students: [
{ name: '张三', class: '一年级一班' },
{ name: '李四', class: '一年级一班' },
{ name: '王五', class: '一年级二班' },
{ name: '赵六', class: '一年级二班' },
{ name: '钱七', class: '二年级一班' },
{ name: '孙八', class: '二年级二班' },
// 其他学生...
],
groups: {} // 用于存放分组后的数据
}
}- 그룹 처리
다음으로, 학생 목록을 학급별로 그룹화하는 코드를 작성해야 합니다. Vue의 마운트 수명 주기 후크 기능으로 데이터를 그룹화하고 결과를 groups 객체에 저장합니다. mounted生命周期钩子函数中进行数据的分组处理，并将结果存放在groups对象中。
mounted() {
this.groupStudents();
},
methods: {
groupStudents() {
this.students.forEach(student => {
if (!this.groups[student.class]) {
this.groups[student.class] = [];
}
this.groups[student.class].push(student);
});
}
}在分组处理的过程中，我们使用forEach方法遍历学生列表，并根据班级进行分组。若某班级的分组尚未创建，则创建一个空数组，然后将该学生添加到对应班级的数组中。
- 列表展示
最后，我们通过遍历分组后的数据，展示分组列表效果。使用v-for指令遍历groups对象的键值对，将班级作为标题，对应的学生数组作为列表内容进行展示。
<template>
<div>
<div v-for="(students, class) in groups" :key="class">
<h2>{{ class }}</h2>
<ul>
<li v-for="student in students" :key="student.name">{{ student.name }}</li>
</ul>
</div>
</div>
</template>在上述代码中，我们使用两次嵌套的v-for指令，第一层遍历分组后的数据的键值对，第二层遍历班级对应的学生数组。并使用:keyrrreee
forEach 메소드를 사용하여 학생 목록을 탐색하고 수업에 따라 그룹화합니다. 특정 학급의 그룹이 아직 생성되지 않은 경우 빈 배열을 생성한 후 해당 학급의 배열에 학생을 추가합니다.
- 목록 표시
마지막으로 그룹화된 데이터를 순회하여 그룹화된 목록 효과를 보여줍니다. v-for 명령을 사용하여 groups 객체의 키-값 쌍을 순회하고, 클래스를 제목으로 사용하고, 해당 학생 배열을 목록 콘텐츠로 표시합니다.
위 코드에서는 두 개의 중첩된 v-for 명령어를 사용합니다. 첫 번째 수준은 그룹화된 데이터의 키-값 쌍을 순회하고 두 번째 수준은 클래스에 해당하는 학생 배열을 순회합니다. . 그리고 :key를 사용하여 학생의 고유 식별 속성을 바인딩하여 렌더링 효율성을 향상시킵니다.
위 내용은 Vue에서 그룹화된 목록을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!