vue实现循环
Vue 实现循环的方法
在 Vue 中，可以通过 v-for 指令实现循环渲染列表或对象。以下是几种常见的用法：
遍历数组
使用 v-for 遍历数组时，可以同时获取当前项和索引：
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item.name }}
</li>
</ul>items 是数据源数组，item 是当前遍历的数组元素，index 是当前索引（可选）。:key 是必须的，用于优化渲染性能。
遍历对象
v-for 也可以遍历对象的属性：
<ul>
<li v-for="(value, key, index) in object" :key="key">
{{ index }}: {{ key }} - {{ value }}
</li>
</ul>value 是属性值，key 是属性名（可选），index 是索引（可选）。
遍历数字
可以直接循环渲染指定次数的内容：
<div v-for="n in 5" :key="n">
第 {{ n }} 次循环
</div>这会渲染 5 次，n 从 1 开始递增。
使用 v-for 与组件
在组件上使用 v-for 时，需要显式传递数据：
<my-component
v-for="(item, index) in items"
:key="item.id"
:item="item"
:index="index">
</my-component>注意事项
- 始终为
v-for添加:key，推荐使用唯一 ID 而非索引。 - 避免直接修改循环的数组，应使用 Vue 提供的数组变更方法（如
push、splice）。 - 嵌套循环时，确保
:key的唯一性。
