vue 实现循环
循环渲染列表
在Vue中，使用v-for指令实现循环渲染列表数据。基本语法为对数组或对象进行遍历，动态生成DOM元素。
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item.name }}
</li>
</ul>遍历数组
最常见的场景是遍历数组，可以同时获取元素和索引值。v-for支持可选的第二个参数作为当前项的索引。
<div v-for="(fruit, i) in fruits">
{{ i + 1 }}. {{ fruit }}
</div>遍历对象
当需要遍历对象属性时，可以获取属性值、键名和索引位置。三个参数按顺序分别为属性值、键名和索引。
<div v-for="(value, key, index) in userInfo">
{{ index }}. {{ key }}: {{ value }}
</div>使用key属性
为维护列表渲染的稳定性，必须为每项提供唯一key属性。通常使用数据中的唯一标识符而非数组索引。
<div v-for="item in items" :key="item.id">
{{ item.content }}
</div>范围循环
v-for也可以接受整数作为循环次数，从1开始计数到指定数值。这种用法适合生成纯数字序列。
<span v-for="n in 5">{{ n }} </span>条件循环组合
v-for可与v-if在同一节点使用，但推荐通过计算属性过滤数据。Vue3中v-if比v-for具有更高的优先级。
<template v-for="item in list">
<div v-if="item.isActive">{{ item.name }}</div>
</template>性能优化
对于大型列表，建议使用虚拟滚动技术减少DOM节点数量。可借助第三方库如vue-virtual-scroller实现高效渲染。
<RecycleScroller
class="scroller"
:items="largeList"
:item-size="50"
key-field="id"
v-slot="{ item }"
>
{{ item.text }}
</RecycleScroller>
