Activity 10: Iterate store types and counts
1. Understanding the Goal
遍历 bookstores 对象中的 storeTypes 数据,渲染每种门店类型及其数量的列表
2. Step-by-Step Instruction
- Step 1: Ensure
bookstores.storeTypesis available (an object mapping type → count). - Step 2: In the template, use
v-forto iterate key–value pairs:(count, type) in bookstores.storeTypes. - Step 3: Provide a unique
:keyusing the store type. - Step 4: Display both the
typeand itscountinside each list item.
3. Code Explanation
| 部分 | 说明 |
|---|---|
bookstores.storeTypes | bookstores 中的对象,键为门店类型,值为对应门店数量。 |
v-for="(count, type) in bookstores.storeTypes" | 遍历对象属性;第一个参数为值(数量 count),第二个为键(类型 type)。 |
:key="type" | 使用门店类型作为唯一 key,提升渲染性能并避免复用问题。 |
{{ type }} / {{ count }} | 插值语法:分别显示门店类型与数量。 |
<ul> ... </ul> | 列表容器,承载各类型与数量条目。 |