data": [ [], [], [], [], [], [], [], [], [], [ { "courseName": "广东佛山", "weekName": "星期一", "amOrPm": "上午" }, { "courseName": "广泛大使馆的风格", "weekName": "星期三", "amOrPm": "上午" }, { "courseName": "怎么又回来了", "weekName": "星期一", "amOrPm": "上午" }, { "courseName": "体育课", "weekName": "星期三", "amOrPm": "上午" }, { "courseName": "美术课", "weekName": "星期五", "amOrPm": "上午" }, { "courseName": "第六节课", "weekName": "星期三", "amOrPm": "上午" }, { "courseName": "第七节课", "weekName": "星期四", "amOrPm": "上午" } ] ] 怎么才能循环遍历拿到里面的数据
时间: 2023-07-03 09:30:01 浏览: 131
可以使用 Vue.js 的指令 v-for 来循环遍历数组中的数据,例如:
```
<div v-for="(dayCourses, index) in data" :key="index">
<p>第{{ index + 1 }}天的课程:</p>
<ul>
<li v-for="(course, i) in dayCourses" :key="i">
<p>{{ course.courseName }}</p>
<p>{{ course.weekName }} {{ course.amOrPm }}</p>
</li>
</ul>
</div>
```
其中,data 是一个二维数组,每个一维数组代表一天的课程列表,每个二维数组中的对象包含了课程名称、星期几以及上午/下午等信息。我们使用 v-for 指令来循环遍历 data 数组,获取每一天的课程列表 dayCourses 和它的索引 index。然后,在内部的循环中,再使用 v-for 指令遍历 dayCourses 数组,获取每门课程的信息 course 和它的索引 i,从而显示出每门课程的名称、星期几和上午/下午等信息。使用 :key 绑定 index 和 i 作为每个元素的唯一标识,提高渲染性能。
阅读全文