vue 实现循环绑定

循环绑定方法

在 Vue 中，v-for 指令用于实现循环绑定，可以遍历数组或对象，动态生成 DOM 元素或组件。

基本语法

使用 v-for 遍历数组时，语法格式如下：

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

遍历对象时，语法如下：

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

绑定 key 的重要性

Vue 要求为每个循环项绑定唯一的 key，以便高效更新 DOM。通常使用 id 或其他唯一标识符：

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

遍历数字范围

v-for 也可以直接遍历数字范围：

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

在组件中使用

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

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

性能优化技巧

避免在 v-for 中使用复杂计算或方法调用，可先在 computed 中处理数据：

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

注意事项

避免在同一元素上同时使用 v-for 和 v-if。如需条件过滤，应改用 computed 属性预处理数据。