vue js怎么循环

Vue.js 中的循环

在 Vue.js 中使用循环可以遍历数据，并动态渲染列表或表格。

语法

Vue.js 中有两种循环语法：

立即学习“前端免费学习笔记（深入）”；

v-for

<div v-for="item in items">  <!-- ... --></div>

在上面的示例中，items 是要循环的数组。每个数组元素将在循环中作为 item 变量可用。

v-for-in

<div v-for-in="(value, key) in object">  <!-- ... --></div>

在上面的示例中，object 是要循环的对象。在循环中，对象的每个键值对将作为 key 和 value 变量可用。

遍历对象

当使用 v-for 遍历对象时，将仅获取对象的键，而不是键值对。要遍历键值对，请使用 v-for-in：

<div v-for-in="person in people">  {{ person.name }}: {{ person.age }}</div>

循环索引

有时你可能需要在循环中使用循环索引。可以使用 v-for 指令中的特殊变量 index 来实现：

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

循环别名

在使用 v-for 循环时，你可以为循环变量指定一个别名：

<div v-for="student in students" :key="student.id">  {{ student.name }}</div>

在这种情况下，student 是循环变量的别名。你可以使用别名来简化循环内的代码。