使用v-for指令循环遍历课表数据,渲染效果如下 1-10周(1-5节)-星期一-软件测试基础-本部-实222 9-16周(6-9节)-星期一-大数据系统综合运用-本部-实333 9-16周(6-9节)-星期二-大数据系统综合运用-本部-实333 9-16周(1-4节)-星期三-大数据系统综合运用-本部-实333 9-18周(10-13节)-星期三-Vue应用程序开发-本部-实222 请输入完整代码
时间: 2023-07-08 07:55:27 浏览: 104
深入浅析Vue.js 中的 v-for 列表渲染指令
假设课表数据存储在一个数组 `timetable` 中,每个元素是一个对象,包含以下属性:
- `week`:课程周数,例如 `"1-10周"`。
- `time`:上课时间,例如 `"1-5节"`。
- `day`:上课日期,例如 `"星期一"`。
- `name`:课程名称,例如 `"软件测试基础"`。
- `location`:上课地点,例如 `"本部-实222"`。
可以使用如下代码渲染课表:
```html
<table>
<thead>
<tr>
<th>时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr v-for="time in ['1-2节', '3-4节', '5-6节', '7-8节', '9-10节', '11-12节', '13-14节']">
<td>{{ time }}</td>
<td v-for="day in ['星期一', '星期二', '星期三', '星期四', '星期五']">
<span v-for="course in timetable" v-if="course.time === time && course.day === day">
{{ course.week }}-{{ course.time }}-{{ course.day }}-{{ course.name }}-{{ course.location }}<br>
</span>
</td>
</tr>
</tbody>
</table>
```
这里使用了两个嵌套的 `v-for` 指令,第一个指令循环遍历上课时间,第二个指令循环遍历上课日期。内部再使用一个 `v-for` 指令过滤出符合条件的课程,渲染出课程信息。注意要使用 `v-if` 指令判断课程的上课时间和日期是否与当前循环到的时间和日期相同。
阅读全文