vue中如何实现循环

循环渲染列表

在Vue中，使用v-for指令实现循环渲染列表数据。v-for可以遍历数组或对象，为每个元素生成对应的DOM节点。

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

遍历数组

当需要遍历数组时，v-for支持第二个参数index，表示当前项的索引位置。

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

遍历对象

对于对象遍历，v-for提供三个参数：value、key和index。

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

使用key属性

为维护列表渲染的性能和稳定性，必须为每个循环项添加唯一的key属性。通常使用数据中的唯一标识符作为key值。

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

范围循环

v-for也可以接受整数，实现指定次数的循环。

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

配合计算属性使用

当需要对列表数据进行过滤或排序时，可以结合计算属性实现。

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

动态组件循环

循环渲染动态组件时，需要使用<component>标签配合is属性。

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