当前位置：首页 > VUE

vue循环数组实现

2026-02-09 11:43:45VUE

vue循环数组的实现方法

在Vue中循环数组主要通过v-for指令实现，以下是几种常见场景的用法：

基本数组遍历

使用v-for指令可以遍历数组，语法为item in items或item of items：

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

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

获取索引值

需要获取当前项的索引时，可以添加第二个参数：

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

遍历数字范围

v-for也可以直接遍历数字范围：

vue循环数组实现

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

遍历对象属性

虽然问题问的是数组，但v-for也可以遍历对象属性：

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

使用`<template>`标签

当需要循环渲染多个元素但不想添加额外DOM节点时：

<template>
  <template v-for="item in items" :key="item.id">
    <p>{{ item.name }}</p>
    <hr>
  </template>
</template>

性能优化建议

为每个循环项添加唯一的key属性，这能帮助Vue高效地更新DOM：

vue循环数组实现

<template>
  <div v-for="item in items" :key="item.id">
    <!-- 内容 -->
  </div>
</template>

数组更新检测

Vue能检测以下数组变更方法并触发视图更新：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

对于无法检测的变化（如直接通过索引修改项），可以使用Vue.set或数组的splice方法。

过滤/排序结果

可以在计算属性中对数组进行处理：

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

<script>
export default {
  computed: {
    filteredItems() {
      return this.items.filter(item => item.active)
    }
  }
}
</script>