vue for实现

Vue 中的 v-for 指令

v-for 是 Vue.js 中用于渲染列表数据的核心指令，通过遍历数组或对象生成动态内容。

基本语法（数组）

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

• items: 数据源数组
• item: 当前迭代项
• index(可选): 当前索引
• :key: 必需的唯一标识符（通常用 id）

对象遍历

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

性能优化

1. 始终提供唯一的 :key 属性，避免使用索引作为 key
2. 复杂列表考虑使用虚拟滚动（如 vue-virtual-scroller）
3. 大数据量时使用 v-show 替代部分 v-for

与计算属性结合

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

注意事项

• 避免直接修改遍历的数组，使用变异方法（push/pop等）
• 嵌套 v-for 时确保 key 的唯一性
• 当与 v-if 共用时，v-for 优先级更高

代码示例

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' }
    ]
  }
})