当前位置：首页 > VUE

vue实现列表

2026-02-10 13:00:15VUE

Vue 实现列表的方法

使用 v-for 指令

Vue 提供了 v-for 指令用于渲染列表数据。可以将 v-for 应用于数组或对象，语法为 item in items 或 (item, index) in items。

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

使用计算属性处理列表数据

当需要对列表数据进行过滤或排序时，可以使用计算属性来生成处理后的列表。

<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', category: 'fruit' },
        { id: 2, name: 'Carrot', category: 'vegetable' },
        { id: 3, name: 'Banana', category: 'fruit' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.category === 'fruit')
    }
  }
}
</script>

列表动画效果

Vue 提供了 <transition-group> 组件来实现列表项的动画效果，适用于添加、删除或重新排序列表项的场景。

<template>
  <button @click="addItem">Add Item</button>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id" class="list-item">
      {{ item.text }}
      <button @click="removeItem(item.id)">×</button>
    </li>
  </transition-group>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' }
      ],
      nextId: 3
    }
  },
  methods: {
    addItem() {
      this.items.push({ id: this.nextId++, text: `Item ${this.nextId}` })
    },
    removeItem(id) {
      this.items = this.items.filter(item => item.id !== id)
    }
  }
}
</script>

<style>
.list-item {
  transition: all 0.5s;
}
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

使用第三方组件库

对于更复杂的列表需求，可以使用第三方 UI 组件库提供的列表组件，如 Element UI 的 el-table 或 Vuetify 的 v-list。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: 'John', address: 'New York' },
        { date: '2023-01-02', name: 'Jane', address: 'London' }
      ]
    }
  }
}
</script>

虚拟滚动优化

对于大型列表，可以使用虚拟滚动技术来提高性能，只渲染可见区域内的列表项。

<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'
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}` }))
    }
  }
}
</script>

<style>
.scroller {
  height: 400px;
}
.item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
</style>

vue实现列表