vue怎样实现列表循环

使用 v-for 指令实现列表循环

在 Vue 中，v-for 是最常用的列表循环指令。它基于源数据多次渲染元素或模板块。

语法示例：

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

绑定 key 属性的重要性

为每个循环项添加唯一的 key 属性能帮助 Vue 高效地更新 DOM。通常使用数据中的唯一标识符作为 key。

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

循环对象属性

v-for 也可以遍历对象的属性，提供属性值、属性名和索引。

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

使用范围值循环

可以基于数字范围进行循环，从 1 开始到指定的数字结束。

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

结合计算属性过滤列表

当需要对列表进行过滤或排序时，可以使用计算属性处理数据后再循环。

computed: {
  filteredItems() {
    return this.items.filter(item => item.isActive)
  }
}

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

在组件上使用 v-for

在自定义组件上使用 v-for 时，需要显式传递数据作为 props。

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

性能优化技巧

对于大型列表，可以考虑使用虚拟滚动技术（如 vue-virtual-scroller）来提升性能，只渲染可视区域内的元素。