当前位置：首页 > VUE

vue实现列表循环

2026-02-10 23:04:04VUE

Vue 列表循环的实现方法

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

基本数组循环

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

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    }
  }
}
</script>

对象循环

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

<script>
export default {
  data() {
    return {
      object: {
        firstName: 'John',
        lastName: 'Doe',
        age: 30
      }
    }
  }
}
</script>

使用 key 的重要性

为每个循环项添加唯一的 key 属性有助于 Vue 高效地更新 DOM。理想情况下，key 应该是数据中的唯一标识符而非索引。

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

循环范围值

v-for 也可以接受一个整数，用于重复模板多次。

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

在组件中使用 v-for

当在组件上使用 v-for 时，必须添加 key，并且数据需要通过 props 传递给子组件。

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

性能优化技巧

对于大型列表，可以考虑使用虚拟滚动技术（如 vue-virtual-scroller）来提升性能。避免在 v-for 中使用复杂计算，必要时使用计算属性预先处理数据。

条件渲染与循环结合

v-for 可以与 v-if 一起使用，但需要注意优先级问题。v-for 的优先级高于 v-if，因此不推荐在同一元素上同时使用。

<template>
  <ul>
    <template v-for="item in items" :key="item.id">
      <li v-if="item.isActive">
        {{ item.name }}
      </li>
    </template>
  </ul>
</template>

vue实现列表循环