Activity 6: Render authors (name + birth year)
1. Understanding the Goal
In this activity, we aim to iterate a list to display the names of authors along with their birth years. We will achieve this by using the v-for directive in Vue.js, which iterates through an array of authors and renders each author's name and birth year.
在本活动中，我们的目标是迭代一个列表，以显示作者的姓名及其出生年份。我们将使用 Vue.js 中的 v-for 指令来实现此目的，该指令会迭代一个作者数组，并渲染每个作者的姓名和出生年份。2. Step-by-Step Instruction
- Step 1: Use
v-forto iterate over the fullauthorsarray. - Step 2: Bind a unique key with
:key="author.id". - Step 3: Interpolate
author.nameandauthor.birthYearinside each<li>.
3. Code Explanation
| 部分 | 说明 |
|---|---|
<li v-for="author in authors"> | 使用 v-for 遍历 authors 数组，为每个作者生成一行列表项。 |
:key="author.id" | 为每个列表项提供唯一 key，提升渲染性能并避免复用错误。 |
{{ author.name }} | 插值语法：显示作者姓名。 |
{{ author.birthYear }} | 插值语法：显示作者出生年份。 |
<ul>...</ul> | 列表容器，用于包裹所有作者条目，保持语义化结构。 |