Activity 11: Iterate opening hours (nested objects)
1. Understanding the Goal
遍历 bookstores 中的嵌套对象 openingHours,按星期显示对应的开门与关门时间。
2. Step-by-Step Instruction
- Step 1: Ensure
bookstores.openingHoursexists and each value containsopenandclose. - Step 2: In the template, iterate key–value pairs with
v-for="(hours, day) in bookstores.openingHours". - Step 3: Use
:key="day"and displayhours.openandhours.close.
3. Code Explanation
| 部分 | 说明 |
|---|---|
bookstores.openingHours | 一个对象,键为星期(如 Monday),值为包含 open 与 close 的时间对象。 |
v-for="(hours, day) in ..." | 对象遍历:hours 为值(时间对象),day 为键(星期)。 |
:key="day" | 使用星期字符串作为唯一 key,保证列表渲染稳定。 |
hours.open / hours.close | 从时间对象中读取开门与关门时间并显示。 |
{{ day }}: {{ hours.open }} - {{ hours.close }} | 插值语法:按“星期:开门 - 关门”的格式输出。 |