vue中列表怎么实现

在 Vue 中实现列表

使用 v-for 指令

Vue 提供 v-for 指令用于渲染列表数据。语法为 v-for="(item, index) in items"，其中 items 是数据源数组，item 是当前项，index 是当前索引。

<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: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  }
}
</script>

绑定 key 属性

为每个列表项绑定唯一的 key 属性，通常是数据中的唯一标识符（如 id）。这有助于 Vue 高效更新 DOM。

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

遍历对象

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

<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
      }
    }
  }
}
</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' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.category === 'fruit')
    }
  }
}
</script>

动态更新列表

直接修改数据源数组（如使用 push、splice）可以触发视图自动更新。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
      <button @click="removeItem(item.id)">Remove</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    removeItem(id) {
      this.items = this.items.filter(item => item.id !== id)
    }
  }
}
</script>

结合 v-if 条件渲染

可以在 v-for 的同一元素上使用 v-if，但更推荐在父级元素上使用 v-if 或在计算属性中过滤数据。

<template>
  <ul v-if="items.length > 0">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
  <p v-else>No items found.</p>
</template>

使用 <template> 标签分组

如果需要渲染多个元素但不引入额外 DOM 节点，可以使用 <template> 标签。

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

性能优化

对于大型列表，可以使用虚拟滚动库（如 vue-virtual-scroller）提升性能，避免渲染所有 DOM 节点。

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div>{{ item.name }}</div>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: { RecycleScroller },
  data() {
    return {
      items: [
        /* large array */
      ]
    }
  }
}
</script>