第 7 课：v-for列表渲染

• 日期：2026-09-08
• 课程序号：第 7 课
• 知识点：v-for 与 key

用途

根据一组课程数据重复生成列表项。

核心概念

v-for 遍历数组；稳定且唯一的 key 帮助 Vue 正确复用和更新每一项。

最小代码或操作示例

<script setup>
const topics = [{ id: 1, name: '模板' }, { id: 2, name: '事件' }]
</script>
<template>
  <li v-for="topic in topics" :key="topic.id">{{ topic.name }}</li>
</template>

3～5 分钟练习

为数组增加第三个不重复 id 的课程，并观察列表。

参考答案

加入 { id: 3, name: '列表' } 后，页面会多显示“列表”。

与上一课的联系

上一课根据条件创建单个节点；本课根据数组创建多个结构相同的节点。