上一篇

下一步

呈现列表

已完成

使用数据通常需要数组或其他类型的集合。 通常可使用某种形式的循环来遍历集合中的所有项。 Vue.js 支持通过名为 v-for 的指令进行循环。

v-for 指令简介

若要显示列表中的所有项，可以使用指令 v-for。 v-for 的行为与 JavaScript 中的 for...of 循环非常类似。 它循环访问某个集合，通过声明的变量提供对每个项的访问。

v-for 的语法如下所示：

v-for="itemName in collectionName"

collectionName 是数据对象中数组的名称。 对于每次迭代，itemName 都假定当前项的标识。 若要在模板中使用 v-for，请将指令添加到元素声明中。 这样做将重复 HTML 元素，数组中有多少项就重复多少次。

备注

如果要创建无序列表 (ul)，就不能将 v-for 添加到 ul 元素中。 可将其添加到 li 元素中，因为 li 元素将被重复。

在应用中使用 v-for

若要在应用中使用 v-for 指令，需要执行两项操作：

• 通过数据对象公开数组。 若要使用 v-for 指令，请确保 data() 方法返回的是数组类型的数据。
• 将 v-for 指令添加到元素。 将 v-for 指令添加到 HTML 元素。 若要显示数组中的数据，请使用双括号 ({{ }}) 语法。

假设你想要在数据对象中公开一个名称数组：

Vue.createApp({
    data() {
        return {
            names: ['Susan', 'Peter', 'Bill' ]
        }
    }
}).mount('#demo');

如果要显示这些项，可以使用以下代码：

<ul id="demo">
    <li v-for="name in names">{{ name }}</li>
</ul>

呈现代码时，将显示数组中的所有名称：

• Susan
• Peter
• Bill

键和状态

如果更改了数据，Vue.js 需要能够刷新显示的相应部分。 使用列表时，最好更新单个项，而不是整个列表。 若要允许 Vue.js 查找单个项，请为每个显示的项指定一个键。 无需将密钥添加到数据对象；可以使用数组的“索引”来生成它。

可以通过更新 v-for 声明来获取索引，如以下代码所示：

<ul id="demo">
    <li v-for="(name, index) in names" :key="index">{{ name }}</li>
</ul>

index 对于数组中的每个项都递增。 :key 指令存储 Vue.js 的键，该键允许它在发生更改时更新单个项。

继续