vue 实现循环

循环渲染列表

在Vue中，使用v-for指令实现循环渲染列表数据。基本语法为对数组或对象进行遍历，动态生成DOM元素。

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

遍历数组

最常见的场景是遍历数组，可以同时获取元素和索引值。v-for支持可选的第二个参数作为当前项的索引。

<div v-for="(fruit, i) in fruits">
  {{ i + 1 }}. {{ fruit }}
</div>

遍历对象

当需要遍历对象属性时，可以获取属性值、键名和索引位置。三个参数按顺序分别为属性值、键名和索引。

<div v-for="(value, key, index) in userInfo">
  {{ index }}. {{ key }}: {{ value }}
</div>

使用key属性

为维护列表渲染的稳定性，必须为每项提供唯一key属性。通常使用数据中的唯一标识符而非数组索引。

<div v-for="item in items" :key="item.id">
  {{ item.content }}
</div>

范围循环

v-for也可以接受整数作为循环次数，从1开始计数到指定数值。这种用法适合生成纯数字序列。

<span v-for="n in 5">{{ n }} </span>

条件循环组合

v-for可与v-if在同一节点使用，但推荐通过计算属性过滤数据。Vue3中v-if比v-for具有更高的优先级。

<template v-for="item in list">
  <div v-if="item.isActive">{{ item.name }}</div>
</template>

性能优化

对于大型列表，建议使用虚拟滚动技术减少DOM节点数量。可借助第三方库如vue-virtual-scroller实现高效渲染。

<RecycleScroller
  class="scroller"
  :items="largeList"
  :item-size="50"
  key-field="id"
  v-slot="{ item }"
>
  {{ item.text }}
</RecycleScroller>