Activity 7: Render authors born after 1850
1. Understanding the Goal
In this activity, we aim to iterate a list that displays the names of authors who were born after 1850. We will again achieve this by using the v-for directive in Vue.js to iterate through an array of filtered authors (modernAuthors) and render each author's name and birth year.
在此活动中,我们的目标是迭代一个列表,显示 1850 年以后出生的作者姓名。我们将再次通过使用 Vue.js 中的v-for指令来遍历过滤后的作者数组(modernAuthors)并呈现每个作者的姓名和出生年份来实现此目的。
2. Step-by-Step Instruction
- Step 1: Create a computed property
modernAuthorsthat filtersauthorsby birth year. - Step 2: In
modernAuthors, return authors wherebirthYear > 1850(use>=if you want to include 1850). - Step 3: Use
v-forto iterate overmodernAuthorsin the template. - Step 4: Bind
:key="author.id"and display the name and birth year.
3. Code Explanation
| 部分 | 说明 |
|---|---|
v-for="author in modernAuthors" | 使用 v-for 遍历 modernAuthors,逐项渲染符合条件的作者。 |
:key="author.id" | 为列表项提供唯一 key,提升渲染性能并避免复用错误。 |
{{ author.name }} | 插值语法:显示作者姓名。 |
{{ author.birthYear }} | 插值语法:显示作者出生年份。 |
modernAuthors | 来自计算属性的筛选结果,仅包含出生年份大于 1850 的作者。 |