Vue.js 中的 v-for
指令用于基于数据集合(数组或对象)重复渲染元素列表。它的主要用途是进行列表渲染,可以遍历并根据数据生成多个相似结构的DOM元素。
基本用法:
遍历数组:
<ul> <li v-for="item in items">{ { item }}</li> </ul>
在这个例子中,
items
是 Vue 实例的数据属性,它是一个数组。v-for
将会为数组中的每个项目创建一个<li>
元素,并将当前项目的值绑定到item
变量上。遍历数组时使用索引:
<ul> <li v-for="(item, index) in items">{ { index }}: { { item }}</li> </ul>
这里,
index
表示当前项在数组中的索引位置。遍历对象的键值对:
<div v-for="(value, key, index) in object"> Key: { { key }}, Value: { { value }} </div>
当遍历对象时,
key
是对象的属性名,value
是对应的属性值,而index
则是当前键值对在所有键值对中的顺序索引。
注意事项:
v-for
与v-if
不建议在同一元素上同时使用,推荐包裹一层<template>
标签来处理条件渲染。在组件上使用
v-for
时,为了优化性能和准确地跟踪每个节点的身份,通常需要为循环生成的组件元素提供一个唯一的key
属性,例如:<my-component v-for="item in items" :key="item.id">...</my-component>
使用
v-for
渲染的列表遵循“就地复用”策略,在数据更新时,Vue 将尽量复用已有 DOM 节点而不是每次都重新创建新的节点,从而提高性能。通过设置key
可以帮助 Vue 更精确地识别哪些节点需要被复用、移动或删除。