当前位置：首页 > VUE

vue实现列表

2026-03-27 22:48:12VUE

基础列表渲染

使用 v-for 指令实现动态列表渲染，绑定数组数据：

vue实现列表

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

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

:key 是必须的，推荐使用唯一标识符（如 id 而非 index）。

条件渲染与列表结合

通过 v-if 或 v-show 控制列表项的显示：

vue实现列表

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', isActive: true },
        { id: 2, name: 'Item 2', isActive: false }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.isActive);
    }
  }
};
</script>

列表事件处理

绑定点击事件或自定义方法操作列表项：

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

<script>
export default {
  methods: {
    handleClick(item) {
      console.log('Clicked:', item.name);
    }
  }
};
</script>

动态列表更新

通过数组方法（如 push、splice）或响应式 API 更新列表：

// 添加新项
this.items.push({ id: 4, name: 'Item 4' });

// 删除项
this.items.splice(index, 1);

// 使用 Vue.set 确保响应式更新（针对非响应式属性）
Vue.set(this.items, index, newItem);

性能优化

对于长列表，使用 vue-virtual-scroller 实现虚拟滚动。
避免在模板内使用复杂计算，优先使用 computed 属性。

<template>
  <ul>
    <li v-for="item in computedList" :key="item.id">
      {{ heavyProcessing(item) }}
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    computedList() {
      return this.items.filter(/* 复杂逻辑 */);
    }
  }
};
</script>