当前位置：首页 > VUE

vue实现列表显示

2026-03-06 16:39:05VUE

Vue实现列表显示的方法

在Vue中实现列表显示通常使用v-for指令，结合数组或对象数据源动态渲染内容。以下是几种常见场景的实现方式：

基础列表渲染

通过v-for指令遍历数组，item代表当前项，index代表索引（可选）：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  }
}
</script>

对象遍历

v-for也可遍历对象的属性，参数顺序为(value, key, index)：

vue实现列表显示

<template>
  <ul>
    <li v-for="(value, key) in userInfo" :key="key">
      {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: 'John',
        age: 30,
        gender: 'Male'
      }
    }
  }
}
</script>

动态样式绑定

结合:class或:style实现条件样式：

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

使用计算属性过滤列表

通过计算属性实现动态过滤：

vue实现列表显示

<template>
  <input v-model="searchText" placeholder="Search...">
  <ul>
    <li v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      items: [/*...*/]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchText.toLowerCase())
      )
    }
  }
}
</script>

组件化列表项

将列表项抽离为独立组件：

<template>
  <ul>
    <ListItem 
      v-for="item in items" 
      :key="item.id"
      :item="item"
      @custom-event="handleEvent"
    />
  </ul>
</template>

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

export default {
  components: { ListItem },
  methods: {
    handleEvent(payload) {
      console.log(payload)
    }
  }
}
</script>

性能优化建议

始终为v-for提供唯一的:key属性，通常使用ID而非索引
大数据量列表考虑使用虚拟滚动（如vue-virtual-scroller）
避免在v-for内部使用复杂计算，优先通过计算属性预处理数据

常见问题解决

数据更新未渲染：确保使用Vue的响应式方法修改数组（如push()、splice()），或使用this.$set()更新对象属性。

嵌套路由列表：结合<router-link>实现导航：

<router-link 
  v-for="item in items"
  :key="item.id"
  :to="`/detail/${item.id}`"
>
  {{ item.name }}
</router-link>

标签: 列表 vue

分享给朋友：

vue 实现复选

Vue 实现复选功能在 Vue 中实现复选功能可以通过多种方式完成，以下是常见的几种方法：使用 v-model 绑定数组通过 v-model 绑定一个数组，可以自动收集用户选择的复选框值。…

vue el 实现

Vue 中使用 Element UI (el) 的实现方法 Element UI 是一个基于 Vue 的组件库，提供丰富的 UI 组件，常用于快速构建企业级中后台产品。以下介绍 Vue 项目中集成和使…

vue实现mouseout

Vue 实现 mouseout 事件的方法在 Vue 中实现 mouseout 事件可以通过多种方式完成，以下是几种常见的方法：使用 v-on 指令 Vue 提供了 v-on 指令（或简写为 @…

实现vue框架

Vue框架的基本实现 Vue是一个渐进式JavaScript框架，用于构建用户界面。以下是实现Vue框架的基本步骤：安装Vue 通过CDN引入Vue是最简单的方式： <script src…

vue搜索实现

Vue 搜索功能实现方法基于计算属性的搜索在 Vue 中可以通过计算属性实现简单的搜索功能。这种方式适合小型数据集，利用 JavaScript 的 filter 方法进行筛选。 data() {…

vue实现发帖

使用 Vue 实现发帖功能前端实现创建发帖表单组件，包含标题和内容输入框，以及提交按钮。使用 v-model 绑定表单数据。 <template> <div>…

vue实现列表显示