vue.js实现循环
Vue.js 实现循环的方法
Vue.js 提供了多种方式实现循环渲染数据，主要依赖 v-for 指令。以下是常见的实现方法：
基础数组循环
通过 v-for 遍历数组，生成列表项。item 是当前元素，index 是可选索引。
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }}
</li>
</ul>items 是数据源数组，:key 用于优化渲染性能，推荐使用唯一标识而非索引。
对象属性循环
遍历对象的属性，value 为属性值，key 为属性名，index 为可选位置索引。
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>数字范围循环
直接渲染数字范围内的内容，从 1 开始到指定数字结束。
<span v-for="n in 10">{{ n }}</span>使用 <template> 包裹多元素
需要循环渲染多个元素且不增加额外 DOM 节点时，可用 <template> 包裹。
<template v-for="item in items">
<p>{{ item.title }}</p>
<span>{{ item.content }}</span>
</template>结合条件渲染
v-for 可与 v-if 在同一节点使用，但优先级低于 v-for。建议通过计算属性过滤数据。
<li v-for="item in activeItems" v-if="item.isActive">
{{ item.name }}
</li>性能优化
- 始终为循环项添加唯一的
:key，通常使用 ID 而非索引。 - 大数据量时考虑虚拟滚动（如
vue-virtual-scroller）。 - 避免在
v-for中直接使用复杂计算，优先预处理数据。
组件循环
循环渲染自定义组件时，需通过 props 传递数据。
<my-component
v-for="(item, index) in items"
:key="item.id"
:item="item"
@custom-event="handleEvent">
</my-component>注意事项
- 不推荐在同一元素上同时使用
v-for和v-if，可能引发逻辑问题。 - 嵌套循环时，确保内层
:key的唯一性。 - 修改数组时需使用 Vue 的变异方法（如
push、splice）或Vue.set。
