vue循环数组实现

vue循环数组实现方法

在Vue中，可以使用v-for指令来循环遍历数组。v-for指令基于一个数组来渲染一个列表，语法格式为item in items或(item, index) in items。

基本数组循环

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}
</script>

带索引的循环 如果需要获取当前项的索引，可以添加第二个参数：

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

对象数组循环 当数组中的元素是对象时，可以直接访问对象属性：

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

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

使用计算属性过滤数组 可以通过计算属性对数组进行过滤或排序后再循环：

<template>
  <ul>
    <li v-for="num in evenNumbers" :key="num">
      {{ num }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5]
    }
  },
  computed: {
    evenNumbers() {
      return this.numbers.filter(number => number % 2 === 0)
    }
  }
}
</script>

在组件中循环 当在组件中使用v-for时，必须绑定key属性：

<template>
  <div>
    <my-component
      v-for="item in items"
      :key="item.id"
      :item="item"
    />
  </div>
</template>

注意事项

1. 始终为v-for添加唯一的key属性，这有助于Vue识别节点身份，提高渲染性能
2. 避免在同一元素上同时使用v-for和v-if，这会导致优先级问题
3. 对于大型列表，考虑使用虚拟滚动技术提高性能
4. 可以直接在v-for中使用范围值，如v-for="n in 10"会循环10次