当前位置：首页 > VUE

vue列表怎么实现

2026-02-17 07:58:40VUE

Vue 列表实现方法

在 Vue 中实现列表渲染主要通过 v-for 指令完成，可以遍历数组或对象生成动态列表。以下是几种常见场景的实现方式：

基础数组列表渲染

使用 v-for 遍历数组，item 代表当前项，index 为可选索引值：

vue列表怎么实现

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

对象属性遍历

v-for 也可遍历对象属性，参数依次为属性值、键名和索引：

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

使用 key 的重要性

为每个列表项添加唯一 key 能提升渲染性能并避免状态混乱。推荐使用唯一 ID 而非索引：

vue列表怎么实现

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

条件渲染结合

配合 v-if 实现过滤（注意避免同节点混用）：

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

组件列表渲染

循环渲染组件时需通过 props 传递数据：

<template>
  <div>
    <ListItem 
      v-for="item in listData"
      :key="item.id"
      :item="item"
    />
  </div>
</template>

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

export default {
  components: { ListItem },
  data() {
    return {
      listData: [/*...*/]
    }
  }
}
</script>