vue实现列表循环

vue实现列表循环的方法

在Vue中实现列表循环主要通过v-for指令完成，以下是几种常见场景的实现方式：

基础数组循环

通过v-for遍历数组，可以使用(item, index)的语法获取元素和索引：

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

对象属性循环

遍历对象属性时，参数顺序为(value, key, index)：

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

带key的循环

为提升性能建议指定唯一key，通常使用数据ID而非索引：

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

范围循环

可直接遍历数字范围：

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

配合v-if使用

在同一节点使用时，v-for优先级高于v-if：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

注意事项

1. 组件中使用v-for时应始终添加key
2. 避免在同一元素同时使用v-for和v-if，建议改用计算属性过滤数据
3. 嵌套循环时每个循环层都需要独立key
4. 大数据量列表建议使用虚拟滚动优化性能

性能优化方案

对于长列表可结合<transition-group>或第三方库如vue-virtual-scroller实现虚拟滚动：

<virtual-scroller :items="largeList" item-height="50">
  <template v-slot="{ item }">
    <div>{{ item.content }}</div>
  </template>
</virtual-scroller>