vue列表怎么实现

实现 Vue 列表的基础方法

使用 v-for 指令可以动态渲染列表。将 v-for 绑定到数组上，遍历数组中的每个元素并生成对应的 DOM 节点。

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

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

使用 :key 提高性能

在 v-for 中必须为每个节点绑定唯一的 key，Vue 依赖 key 进行高效的 DOM 更新。通常使用唯一标识符（如 id）而非数组索引。

<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 user" :key="key">
      {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 30,
        email: 'john@example.com'
      }
    }
  }
}
</script>

结合计算属性动态过滤列表

通过计算属性可以动态过滤或排序列表数据，避免直接修改原始数据。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', category: 'fruit' },
        { id: 2, name: 'Carrot', category: 'vegetable' },
        { id: 3, name: 'Banana', category: 'fruit' }
      ],
      filterCategory: 'fruit'
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.category === this.filterCategory)
    }
  }
}
</script>

使用 v-for 结合 v-if 的条件渲染

Vue 3 允许 v-for 和 v-if 同时作用在同一个元素上，但建议优先使用计算属性过滤数据以提高性能。

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

列表动态更新

Vue 会响应数据变化自动更新 DOM。直接修改数组（如 push、splice）或替换整个数组均可触发视图更新。

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

使用 <template> 渲染多元素块

如果需要渲染多个元素但不希望包裹额外 DOM，可以使用 <template> 标签。

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