vue 实现循环绑定

Vue 循环绑定实现方法

在 Vue 中实现循环绑定主要依赖 v-for 指令，该指令可以遍历数组或对象，为每个元素生成对应的 DOM 结构。

遍历数组

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

items 是数据源数组，item 是当前迭代元素，index 是可选索引值。:key 是必须提供的属性，帮助 Vue 识别节点。

遍历对象

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

遍历对象时可获取值、键名和索引三个参数。

使用范围值

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

这会渲染数字 1 到 10，适用于简单数字序列场景。

组件循环

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

循环渲染组件时需要传递必要属性，并确保 key 的唯一性。

注意事项

• 始终为 v-for 提供 :key 属性，最好使用唯一 ID 而非索引
• 避免在同一元素上同时使用 v-if 和 v-for，应改为在包裹元素上使用 v-if
• 对于大型列表，考虑使用虚拟滚动技术优化性能