当前位置：首页 > VUE

vue实现list

2026-03-27 17:22:47VUE

Vue 实现列表（List）的方法

在 Vue 中实现列表功能通常使用 v-for 指令，结合数据绑定和组件化思想。以下是几种常见的实现方式：

基础列表渲染

通过 v-for 指令遍历数组，动态生成列表项：

vue实现list

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

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

带状态的列表项

为列表项添加交互逻辑，如点击事件：

<template>
  <ul>
    <li 
      v-for="(item, index) in items" 
      :key="index"
      @click="selectItem(index)"
      :class="{ active: selectedIndex === index }"
    >
      {{ item.text }}
    </li>
  </ul>
</template>

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

可编辑列表

实现动态添加/删除列表项：

vue实现list

<template>
  <div>
    <input v-model="newItem" @keyup.enter="addItem">
    <button @click="addItem">Add</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <button @click="removeItem(index)">×</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2'],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push(this.newItem)
        this.newItem = ''
      }
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

使用组件封装列表项

当列表项较复杂时，建议拆分为子组件：

<!-- Parent.vue -->
<template>
  <ul>
    <list-item 
      v-for="(item, index) in items"
      :key="item.id"
      :item="item"
      @remove="removeItem"
    />
  </ul>
</template>

<!-- ListItem.vue -->
<template>
  <li>
    {{ item.text }}
    <button @click="$emit('remove', item.id)">Remove</button>
  </li>
</template>

<script>
export default {
  props: ['item']
}
</script>

性能优化

对于大型列表，可使用虚拟滚动技术（如 vue-virtual-scroller）：

<template>
  <RecycleScroller
    :items="largeList"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div>{{ item.text }}</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 {
      largeList: [...] // 包含大量数据的数组
    }
  }
}
</script>