当前位置：首页 > VUE

vue列表怎么实现

2026-03-29 07:22:58VUE

基础列表渲染

在 Vue 中，通过 v-for 指令实现列表渲染。语法为 v-for="item in items"，其中 items 是数据源数组，item 是当前遍历的元素。

<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: 'Apple' },
        { id: 2, name: 'Banana' }
      ]
    };
  }
};
</script>

带索引的列表

需要索引时，语法为 v-for="(item, index) in items"，index 表示当前项的索引。

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

遍历对象

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

vue列表怎么实现

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

<script>
export default {
  data() {
    return {
      user: { name: 'Alice', age: 25 }
    };
  }
};
</script>

动态绑定 `key`

为提升性能，必须为每项绑定唯一 key（通常用 id），避免复用 DOM 节点导致的渲染问题。

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

列表更新检测

Vue 能检测数组变更方法（如 push()、pop()），但直接通过索引修改项或修改数组长度时，需使用 Vue.set 或 this.$set 触发响应式更新。

vue列表怎么实现

// 正确方式
this.$set(this.items, 0, { id: 1, name: 'New Item' });

// 错误方式（不会触发视图更新）
this.items[0] = { id: 1, name: 'New Item' };

过滤或排序列表

通过计算属性返回处理后的列表，避免直接修改原始数据。

<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', stock: 10 },
        { id: 2, name: 'Banana', stock: 0 }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.stock > 0);
    }
  }
};
</script>

性能优化

长列表可使用虚拟滚动库（如 vue-virtual-scroller）减少 DOM 节点数量，提升渲染性能。

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