vue列表实现

Vue 列表实现方法

使用 v-for 指令

v-for 是 Vue 中用于渲染列表的核心指令，基于数据源动态生成 DOM 元素。语法格式为 item in items 或 (item, index) in items。

<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' }
      ]
    }
  }
}
</script>

绑定 key 属性

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

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

嵌套列表渲染

v-for 可嵌套使用，实现多维数据渲染。

<template>
  <div v-for="category in categories" :key="category.id">
    <h3>{{ category.name }}</h3>
    <ul>
      <li v-for="product in category.products" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

条件渲染结合

通过 v-if 或 v-show 控制列表项的显示逻辑。

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

动态过滤与排序

使用计算属性对列表数据进行处理，实现过滤或排序功能。

<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', type: 'fruit' },
        { id: 2, name: 'Carrot', type: 'vegetable' }
      ],
      filterType: 'fruit'
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.type === this.filterType)
    }
  }
}
</script>

使用 template 标签包裹

当需要渲染多个兄弟元素且不希望引入额外 DOM 节点时，可使用 <template> 包裹。

<template v-for="item in items" :key="item.id">
  <p>{{ item.name }}</p>
  <button @click="select(item)">Select</button>
</template>

性能优化

对于长列表（如超过 1000 项），建议使用虚拟滚动库（如 vue-virtual-scroller）减少 DOM 节点数量。

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