Vue Academy · 课时

条件渲染与循环

Q: 「条件渲染与循环」这节课中我会学到什么？

使用 v-if 进行条件渲染，使用 v-for 渲染列表 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 v-if 进行条件渲染，使用 v-for 渲染列表

条件渲染与循环 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。

条件渲染

Vue 允许您根据数据显示或隐藏界面的一部分。

v-if 根据条件渲染元素
v-else-if 和 v-else 串联多个条件
v-show 切换可见性

v-if

v-if 指令仅在其表达式的结果为真时渲染元素。

<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>

v-else-if 与 v-else

使用 v-else-if 和 v-else 串联条件。它们必须直接跟在 v-if 后面。

<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>

v-show

v-show 始终渲染元素，但会切换其 CSS display 属性。

<div v-show="isVisible">
  This div stays in the DOM,
  only display:none toggles.
</div>

v-if 与 v-show

关键区别如下：

v-if 会将元素完全添加到 DOM 或从 DOM 中移除
v-show 会保留元素在 DOM 中，只切换 display 属性

对于经常切换的内容，请使用 v-show。当条件很少变化或元素开销较大时，请使用 v-if。

遍历数组的 v-for

v-for 指令通过遍历数组来渲染列表。

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->

带索引的 v-for

v-for 还可以提供每个项目的索引。

<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

:key 的重要性

使用 v-for 时，始终提供唯一的 :key。

帮助 Vue 跟踪每个节点的身份
实现高效且正确的 DOM 更新
使用稳定的唯一 ID，而不是在项目重新排序时使用数组索引

<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

为什么 :key 很重要

如果没有合适的 key，列表发生变化时 Vue 可能会复用错误的元素。

表单输入可能保留错误的值
动画可能出现异常
状态可能附着到错误的行

稳定且唯一的 key 可以避免这些错误。

遍历对象的 v-for

v-for 可以遍历对象的属性值，也可以选择提供键和索引。

<li v-for="(value, key) in userProfile" :key="key">
  {{ key }}: {{ value }}
</li>

<!-- userProfile = { name: "Ada", age: 36 } -->

结合使用 v-for 和条件

要筛选列表，建议使用计算属性，而不要将 v-if 放在与 v-for 相同的元素上。

<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
  {{ task.title }}
</li>

<!-- activeTasks is a computed that
     returns only unfinished tasks -->

快速检查

测试您对条件和循环的理解。

回顾：条件和循环

您学会了列表渲染和条件渲染：

v-if / v-else-if / v-else 根据条件进行渲染
v-show 只切换显示状态
v-for 遍历数组和对象
始终添加唯一的 :key
使用计算属性筛选列表

接下来：属性和类绑定。

常见问题解答

「条件渲染与循环」课时是免费的吗？

是的 — 「条件渲染与循环」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。

「条件渲染与循环」这节课中我会学到什么？

使用 v-if 进行条件渲染，使用 v-for 渲染列表你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 3 节。

「条件渲染与循环」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy