当前位置：首页 > VUE

vue实现竖向列表

2026-03-30 08:10:45VUE

Vue 实现竖向列表

在 Vue 中实现竖向列表可以通过多种方式完成，以下是几种常见的方法：

使用 `v-for` 指令

通过 Vue 的 v-for 指令可以轻松渲染一个竖向列表。假设有一个数组 items，可以通过以下方式渲染：

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

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

使用 CSS 控制布局

如果需要更灵活的样式控制，可以通过 CSS 调整列表的布局。例如，使用 flex-direction: column 实现竖向排列：

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

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

<style>
.vertical-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.list-item {
  padding: 8px;
  background: #f0f0f0;
}
</style>

使用第三方库

如果需要更复杂的功能（如虚拟滚动、拖拽排序等），可以借助第三方库如 vue-virtual-scroller 或 sortablejs。以下是使用 vue-virtual-scroller 的示例：

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

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: {
    RecycleScroller
  },
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}
</script>

<style>
.scroller {
  height: 300px;
}
.item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>

动态加载数据

如果列表数据需要从后端动态加载，可以通过异步请求实现：

vue实现竖向列表

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

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  async created() {
    const response = await fetch('https://api.example.com/items')
    this.items = await response.json()
  }
}
</script>

以上方法可以根据具体需求选择使用，从简单的静态列表到复杂的动态加载和优化场景均可覆盖。