当前位置：首页 > VUE

vue实现列表展示

2026-02-19 08:55:09VUE

实现列表展示的基本方法

在Vue中实现列表展示通常使用v-for指令。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' }
      ],
      selectedCategory: 'fruit'
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.category === this.selectedCategory)
    }
  }
}
</script>

列表渲染的性能优化

对于大型列表，可以使用v-for的key属性和Vue的虚拟滚动技术来提高性能。

<template>
  <div style="height: 300px; overflow-y: auto">
    <div v-for="item in largeList" :key="item.id" style="height: 50px">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      largeList: Array.from({ length: 1000 }, (_, i) => ({
        id: i,
        name: `Item ${i + 1}`
      }))
    }
  }
}
</script>

使用第三方组件库实现高级列表

对于更复杂的列表需求，可以使用第三方UI库如Element UI或Vuetify。

<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: '2016-05-02',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        },
        {
          date: '2016-05-04',
          name: 'Jane Doe',
          address: 'No.189, Grove Street, Los Angeles'
        }
      ]
    }
  }
}
</script>

响应式列表更新

Vue会自动跟踪数组变化，但某些操作需要特殊处理才能触发视图更新。

// 添加元素
this.items.push(newItem)

// 删除元素
this.items.splice(index, 1)

// 修改元素
Vue.set(this.items, index, newValue)

// 替换整个数组
this.items = newArray

列表与表单绑定

可以实现可编辑的列表，将列表项与表单输入绑定。

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

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

vue实现列表展示