当前位置：首页 > VUE

vue实现纵向列表

2026-01-17 12:27:01VUE

实现纵向列表的基本方法

在Vue中实现纵向列表可以通过v-for指令结合数组数据渲染。核心是利用循环遍历数据生成列表项，并设置CSS控制纵向排列。

<template>
  <div class="list-container">
    <div v-for="(item, index) in items" :key="index" class="list-item">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: '项目1' },
        { text: '项目2' },
        { text: '项目3' }
      ]
    }
  }
}
</script>

<style>
.list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.list-item {
  padding: 8px;
  border: 1px solid #ddd;
}
</style>

带滚动功能的纵向列表

当列表项较多时需要添加滚动容器。通过限制容器高度并设置overflow-y实现。

<template>
  <div class="scroll-container">
    <div v-for="(item, index) in longItems" :key="index">
      {{ item.id }} - {{ item.content }}
    </div>
  </div>
</template>

<style>
.scroll-container {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #eee;
}
</style>

动态加载数据的列表

结合异步数据获取实现动态加载，常用于分页或无限滚动场景。

export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1
    }
  },
  methods: {
    async loadMore() {
      if (this.loading) return;
      this.loading = true;
      const newItems = await fetchData(this.page);
      this.items.push(...newItems);
      this.page++;
      this.loading = false;
    }
  },
  mounted() {
    this.loadMore();
  }
}

性能优化的虚拟滚动

对于超长列表建议使用虚拟滚动技术，如vue-virtual-scroller库。

npm install vue-virtual-scroller

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

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
export default {
  components: { RecycleScroller },
  data() {
    return {
      items: [...]
    }
  }
}
</script>

带交互功能的列表

实现可排序、可选择的列表功能，可以结合Vue的响应式特性和事件处理。

<template>
  <ul>
    <li v-for="(item, index) in items" 
        :key="item.id"
        @click="selectItem(index)"
        :class="{ active: selectedIndex === index }">
      {{ item.name }}
      <button @click.stop="removeItem(index)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      selectedIndex: null,
      items: [...]
    }
  },
  methods: {
    selectItem(index) {
      this.selectedIndex = index
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

每种实现方式适用于不同场景，基础列表适合简单数据展示，虚拟滚动优化大量数据渲染性能，交互式列表满足用户操作需求。根据实际项目需求选择合适方案。

vue实现纵向列表