vue实现列表

实现列表的基本方法

在Vue中实现列表通常使用v-for指令，这是Vue的核心功能之一。v-for可以遍历数组或对象，为每个元素生成对应的DOM节点。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, 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' }
      ],
      filterCategory: 'fruit'
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.category === this.filterCategory)
    }
  }
}
</script>

动态添加和删除列表项

列表操作通常需要添加或删除项目，这可以通过修改数据数组来实现。

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

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

使用组件渲染列表项

对于复杂的列表项，可以将其封装为单独的组件，提高代码的可维护性和复用性。

<template>
  <ul>
    <list-item 
      v-for="item in items" 
      :key="item.id"
      :item="item"
      @remove="removeItem"
    />
  </ul>
</template>

<script>
import ListItem from './ListItem.vue'

export default {
  components: {
    ListItem
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    removeItem(id) {
      this.items = this.items.filter(item => item.id !== id)
    }
  }
}
</script>

ListItem.vue组件：

<template>
  <li>
    {{ item.name }}
    <button @click="$emit('remove', item.id)">Remove</button>
  </li>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

性能优化技巧

对于大型列表，可以使用虚拟滚动技术提高性能。Vue提供了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'
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 + 1}`
      }))
    }
  }
}
</script>

<style>
.scroller {
  height: 500px;
}
.item {
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
}
</style>

列表排序和过滤

Vue的列表可以方便地实现排序和过滤功能，通常结合计算属性和方法来实现。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <select v-model="sortOrder">
      <option value="asc">Ascending</option>
      <option value="desc">Descending</option>
    </select>
    <ul>
      <li v-for="item in sortedAndFilteredItems" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', price: 1.2 },
        { id: 2, name: 'Banana', price: 0.8 },
        { id: 3, name: 'Orange', price: 1.5 }
      ],
      searchQuery: '',
      sortOrder: 'asc'
    }
  },
  computed: {
    sortedAndFilteredItems() {
      let items = [...this.items]

      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        items = items.filter(item => 
          item.name.toLowerCase().includes(query)
        )
      }

      if (this.sortOrder === 'asc') {
        items.sort((a, b) => a.price - b.price)
      } else {
        items.sort((a, b) => b.price - a.price)
      }

      return items
    }
  }
}
</script>