Activity 12: Get top sellers from bookstores · Jimmy Huang's Blog

Activity 12: Get top sellers from bookstores

本页目录· 3 条

1. Understanding the Goal
2. Step-by-Step Instruction
3. Code Explanation

1. Understanding the Goal

从 bookstores 对象读取 topSellers 数组，并在模板中渲染畅销书列表。

2. Step-by-Step Instruction

Step 1: Ensure bookstores.topSellers exists and is an array of strings.
Step 2: In the template, create a <ul> and iterate bookstores.topSellers with v-for.
Step 3: Provide a unique :key (use a composite from title and idx).
Step 4: Render each seller title within an <li>.

3. Code Explanation

部分	说明
`bookstores.topSellers`	`bookstores` 对象中的数组，包含畅销书标题列表。
`v-for="(title, idx) in bookstores.topSellers"`	遍历 `topSellers` 数组，逐项得到标题 `title` 与索引 `idx`。
`:key="title + '-' + idx"`	使用标题与索引组成的复合 key，保证列表渲染稳定。
`{{ title }}`	插值语法：在列表项中显示每本畅销书的标题。