Vue.js 中使用 表全解析_items_在 `v-for` 指令中使用这个组件

作者：编程小白 | 发布时间：2025-07-02 |

Vue.js 中使用 `v-for` 遍历列表全解析

一、用 `v-for` 遍历数组或对象

在 Vue.js 中，`v-for` 是一个强大的指令，它允许你遍历数组或对象。用法就像在 JavaScript 里的 `for` 循环一样简单。

比如，我们有一个数组 items，就可以用 `v-for` 来遍历它，并在模板里显示每个项。

Vue 代码 渲染结果
<ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> 一个包含所有项目名称的列表

二、模板中动态绑定数据

在 Vue 实例中，你可以定义一个数据属性来存储你的数组。比如，在 data 选项中定义一个 items 数组，然后在模板中使用 `v-for` 来遍历它。

Vue 代码 渲染结果
<template> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </template> 一个动态生成的列表，显示了所有项目名称

三、为列表项指定唯一的 `key` 属性

给每个列表项指定一个唯一的 `key` 属性对于 Vue 来说是很重要的。这有助于 Vue 更高效地更新和渲染列表，尤其是在列表项发生变化时。

通常，你可以使用每个列表项的唯一属性作为 `key` 的值。

Vue 代码 渲染结果
<li v-for="item in items" :key="item.id">{{ item.name }}</li> 列表项使用了唯一的 `id` 作为 `key`

四、遍历对象

`v-for` 不仅能遍历数组，还能遍历对象的属性。

Vue 代码 渲染结果
<li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li> 遍历对象，显示每个键值对

五、嵌套循环

有时候，你可能需要嵌套循环来遍历多层数据结构。

Vue 代码 渲染结果
<ul> <li v-for="parent in parents" :key="parent.id"> {{ parent.name }} <ul> <li v-for="child in parent.children" :key="child.id">{{ child.name }}</li> </ul> </li> </ul> 显示父项和其子项的嵌套列表

六、使用组件渲染列表项

使用组件可以让你重用代码，并使代码更加清晰和模块化。

Vue 代码 渲染结果
<template> <list-item v-for="item in items" :key="item.id" :item="item"> </list-item> </template> 使用列表项组件渲染每个列表项

七、总结与建议

通过这些步骤，你可以在 Vue.js 中轻松地遍历和渲染列表。记得确保数据的唯一性，优化性能，并且模块化你的代码。

更多信息，请参考以下 FAQ：