当前位置：首页 > article >正文

VUE组件学习 | 五、v-for组件

article 2025/1/24 17:38:21

`v-for` 指令基础知识

v-for 是 Vue.js 中的一个指令，用于基于源数据多次渲染元素或模板块。它类似于 JavaScript 中的 for 循环。

基本语法

<template>
  <div>
    <!-- 基本列表渲染 -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
      </li>
    </ul>

    <!-- 使用 `(item, index)` 形式 -->
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ index }}: {{ item.text }}
      </li>
    </ul>

    <!-- 使用 `object` 形式 -->
    <ul>
      <li v-for="(value, key, index) in object" :key="key">
        {{ index }}. {{ key }}: {{ value }}
      </li>
    </ul>

    <!-- 使用 `v-for` 在 `v-for` 中 -->
    <template v-for="item in items">
      <div v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
        {{ item.text }} - {{ subItem.text }}
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
      object: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },
};
</script>

重要注意事项

key 属性：在使用 v-for 时，必须为每个循环的元素提供一个唯一 key 属性。这有助于 Vue.js 跟踪每个节点的身份，从而优化 DOM 更新过程。
性能：虽然 v-for 很方便，但过度使用或在大量数据上使用可能会导致性能问题。在这种情况下，考虑使用 v-if 或 v-show 来控制渲染，或者使用虚拟滚动等技术。
数组更新检测：Vue.js 可以检测数组的变化（如添加、删除、排序）并相应地更新 DOM。但是，它不能检测以下数组的变动：
- 当你直接设置一个项的索引时，例如：vm.items[indexOfItem] = newValue
- 当你修改数组的长度时，例如：vm.items.length = newLength
在这些情况下，可以使用 Vue.set 或 vm.$set 方法来更新数组项，或者使用 splice 方法来修改数组。
对象的 v-for：当使用对象进行 v-for 时，你可以访问到每个属性的值、键和索引。但是，Vue 不能检测到对象属性的添加或删除。如果需要响应这些变化，可以考虑使用数组来存储键值对。