vue for实现

使用 v-for 进行列表渲染

在 Vue 中，v-for 指令用于基于源数据多次渲染一个元素或模板块。基本语法为 v-for="item in items"，其中 items 是源数据数组，item 是被迭代的数组元素的别名。

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

获取索引值

可以通过添加第二个参数获取当前项的索引值，语法为 v-for="(item, index) in items"。

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

遍历对象

v-for 也可以用于遍历对象的属性，语法为 v-for="(value, key, index) in object"。

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

使用 key 属性

为了提高性能并确保正确的 DOM 更新，建议为每个 v-for 渲染的元素提供一个唯一的 key 属性。

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

数组更新检测

Vue 对数组的变异方法（如 push、pop、shift、unshift、splice、sort、reverse）进行了包裹，调用这些方法会触发视图更新。非变异方法（如 filter、concat、slice）会返回新数组，需要替换原数组才能触发更新。

// 变异方法
this.items.push({ id: 4, message: 'New item' });

// 非变异方法
this.items = this.items.filter(item => item.id !== 2);

注意事项

避免在同一元素上同时使用 v-for 和 v-if，因为 v-for 的优先级高于 v-if。推荐使用计算属性过滤列表，再渲染过滤后的结果。

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

<ul>
  <li v-for="item in filteredItems" :key="item.id">
    {{ item.message }}
  </li>
</ul>

使用范围值

v-for 可以接受整数，用于重复渲染模板多次。

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