vue 实现循环绑定

循环绑定实现方式

在 Vue 中实现循环绑定主要通过 v-for 指令完成，该指令基于源数据多次渲染元素或模板块。以下是几种常见场景的实现方法：

数组循环绑定

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

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

对象属性循环

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

<script>
export default {
  data() {
    return {
      object: {
        title: '标题',
        author: '作者'
      }
    }
  }
}
</script>

数字范围循环

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

关键注意事项

使用 v-for 时必须为每项提供唯一的 key 属性，这有助于 Vue 高效更新 DOM。理想情况下应使用数据中的唯一标识而非数组索引。

性能优化

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

嵌套循环处理

对于多维数据可使用嵌套 v-for：

<template>
  <div v-for="group in groups" :key="group.id">
    <h3>{{ group.name }}</h3>
    <ul>
      <li v-for="member in group.members" :key="member.id">
        {{ member.name }}
      </li>
    </ul>
  </div>
</template>

与条件渲染结合

v-for 可与 v-if 配合使用，但建议优先使用计算属性过滤数据而非在同一元素上同时使用两者：

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

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

组件循环

循环渲染组件时需通过 props 传递数据：

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