vue循环数组实现

循环数组的实现方法

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

基本数组循环

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

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    }
  }
}
</script>

对象数组循环

<template>
  <div>
    <div v-for="user in users" :key="user.id">
      <p>姓名: {{ user.name }}</p>
      <p>年龄: {{ user.age }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    }
  }
}
</script>

带索引的对象数组循环

<template>
  <div>
    <div v-for="(user, index) in users" :key="user.id">
      <p>序号: {{ index + 1 }}</p>
      <p>姓名: {{ user.name }}</p>
    </div>
  </div>
</template>

使用计算属性过滤数组

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目A', active: true },
        { id: 2, name: '项目B', active: false }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.active)
    }
  }
}
</script>

嵌套循环

<template>
  <div>
    <div v-for="category in categories" :key="category.id">
      <h3>{{ category.name }}</h3>
      <ul>
        <li v-for="product in category.products" :key="product.id">
          {{ product.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

使用v-for范围值

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

注意事项

• 始终为v-for提供唯一的:key属性，通常使用id而不是index
• 避免在同一元素上同时使用v-if和v-for，优先使用计算属性过滤数据
• 对于大型列表，考虑使用虚拟滚动技术优化性能
• 数组变更检测注意事项：Vue能检测到数组的变异方法(push/pop/shift等)，但直接设置索引值或修改长度需要使用Vue.set或数组的splice方法