v-for 列表渲染指令

最后更新：2026-10-22

v-for 按数组或对象迭代渲染一组元素，语法 item in items；务必提供 key 帮助 Vue 高效更新。

📝 语法

<li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.name }}</li>

<!-- 对象迭代 -->
<div v-for="(value, key) in object"></div>

expression	可迭代数据（数组/对象/数字/字符串），第二参数为索引或键名

返回值：指令，无返回值

修改下面的代码，在预览区实时查看效果：

输出：

页面渲染三条列表项：1. HTML、2. CSS、3. JavaScript。

⚠️ 注意 必须提供唯一 key（用 id 而非索引）：索引作 key 在列表增删时会引发状态错位。

⚠️ 注意 不要与 v-if 写在同一元素上：拆成外层 template 包 v-for，内层元素写 v-if。

💡 提示 数组变化方法（push/splice/sort 等）会被自动侦测；直接改下标 arr[0] = x 不会触发更新。

更多案例即将上线。

Q key 为什么不能随便写？

A key 是 Vue 识别节点身份的依据：用索引作 key，列表增删时旧状态会串到错误的行上。

Q 为什么直接改数组下标不触发更新？

A Vue 3 用 Proxy 能追踪下标赋值……前提是通过响应式代理访问；对 ref/reactive 包装后的数组是可以的，对普通数组不行。

Q v-for 和 v-if 能写在一起吗？

A 不建议：v-if 优先执行拿不到循环变量。把 v-if 放到外层 template 上。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。