vue如何实现列表

使用 v-for 指令渲染列表

在 Vue 中，可以通过 v-for 指令动态渲染列表数据。v-for 需要特殊的语法形式 item in items，其中 items 是源数据数组，item 是数组元素的别名。

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

绑定 key 属性提升性能

为每个列表项提供一个唯一的 key 属性，帮助 Vue 高效地更新虚拟 DOM。key 通常使用数据中的唯一标识符，如 id。

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

处理列表更新

当列表数据发生变化时，Vue 会自动重新渲染列表。确保使用响应式方法更新数组，如 push()、pop()、splice() 等，或使用 Vue.set 和 this.$set 确保响应性。

methods: {
  addItem() {
    this.items.push({ id: 4, text: '新项目' });
  }
}

列表过滤与排序

可以通过计算属性对列表数据进行过滤或排序，避免直接修改原始数据。

computed: {
  filteredItems() {
    return this.items.filter(item => item.isActive);
  }
}

使用 v-for 的索引

v-for 支持可选的第二个参数作为当前项的索引。

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

渲染对象列表

v-for 也可用于遍历对象的属性，提供值、键和索引。

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

动态组件列表

结合 <component> 和 v-for 可以动态渲染不同组件。

<component
  v-for="(item, index) in items"
  :key="item.id"
  :is="item.componentType"
></component>