vue实现列表循环

使用 v-for 指令实现列表循环

Vue 的 v-for 指令是渲染列表的核心方法，可以遍历数组或对象。基本语法如下：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    };
  }
};
</script>

绑定 key 的重要性

为每个循环项添加唯一的 key 属性（通常使用 id）能帮助 Vue 高效更新 DOM。避免使用索引 index 作为 key，除非列表是静态的。

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

遍历对象属性

v-for 也可遍历对象的属性，参数顺序为 (value, key, index)：

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

<script>
export default {
  data() {
    return {
      userInfo: {
        name: 'John',
        age: 30,
        role: 'Developer'
      }
    };
  }
};
</script>

性能优化：避免 v-if 与 v-for 共用

在同一元素上同时使用 v-if 和 v-for 会导致性能问题。推荐通过计算属性过滤数据：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', active: true },
        { id: 2, name: 'Banana', active: false },
        { id: 3, name: 'Orange', active: true }
      ]
    };
  },
  computed: {
    activeItems() {
      return this.items.filter(item => item.active);
    }
  }
};
</script>

动态更新列表

直接通过数组方法（如 push、splice）修改数据，Vue 会自动触发视图更新：

methods: {
  addItem() {
    this.items.push({ id: 4, name: 'Mango' });
  },
  removeItem(index) {
    this.items.splice(index, 1);
  }
}

使用 <template> 包裹多元素

需要循环渲染多个兄弟元素时，用 <template> 包裹并添加 v-for：

<template v-for="item in items" :key="item.id">
  <p>{{ item.name }}</p>
  <span>{{ item.price }}</span>
</template>