当前位置：首页 > VUE

vue实现模拟列表

2026-01-18 15:59:24VUE

使用 Vue 实现模拟列表

在 Vue 中实现模拟列表可以通过多种方式完成，常见的方法包括使用 v-for 指令动态渲染数据、结合计算属性或方法进行列表操作。以下是一个完整的实现方案：

基础列表渲染

通过 v-for 指令渲染数组数据，绑定 key 提升性能：

<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>

动态添加/删除列表项

通过方法修改数据数组实现列表的动态更新：

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <button @click="removeLastItem">Remove Item</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry']
    };
  },
  methods: {
    addItem() {
      this.items.push(`Item ${this.items.length + 1}`);
    },
    removeLastItem() {
      this.items.pop();
    }
  }
};
</script>

列表过滤与搜索

使用计算属性实现列表的过滤功能：

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search..." />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

虚拟滚动优化长列表

对于长列表，使用 vue-virtual-scroller 等库优化性能：

vue实现模拟列表

安装依赖：
```
npm install vue-virtual-scroller
```

实现虚拟滚动列表：


<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>

import { RecycleScroller } from 'vue-virtual-scroller'; import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

export default { components: { RecycleScroller }, data() { return { items: Array.from({ length: 1000 }, (_, i) => ({ id: i, name: Item ${i} })) }; } };

vue实现模拟列表

.scroller { height: 400px; } .item { height: 50px; padding: 10px; } ```

拖拽排序列表

通过 vuedraggable 实现可拖拽排序的列表：

安装依赖：
```
npm install vuedraggable
```

实现拖拽功能：


<template>
<draggable v-model="items" tag="ul" @end="onDragEnd">
 <li v-for="item in items" :key="item.id">
   {{ item.name }}
 </li>
</draggable>
</template>

import draggable from 'vuedraggable';

export default { components: { draggable }, data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' } ] }; }, methods: { onDragEnd() { console.log('New order:', this.items); } } };

```

以上方法涵盖了从基础列表渲染到高级功能（如虚拟滚动、拖拽排序）的实现，可根据实际需求选择适合的方案。