vue 实现循环绑定
循环绑定方法
在 Vue 中，v-for 指令用于实现循环绑定，可以遍历数组或对象，动态生成 DOM 元素或组件。
基本语法
使用 v-for 遍历数组时，语法格式如下：
<div v-for="(item, index) in items" :key="index">
{{ item }}
</div>遍历对象时，语法如下：
<div v-for="(value, key, index) in object" :key="key">
{{ key }}: {{ value }}
</div>绑定 key 的重要性
Vue 要求为每个循环项绑定唯一的 key，以便高效更新 DOM。通常使用 id 或其他唯一标识符：
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>遍历数字范围
v-for 也可以直接遍历数字范围：
<span v-for="n in 5" :key="n">{{ n }}</span>在组件中使用
循环渲染组件时，需通过 props 传递数据：
<my-component
v-for="(item, index) in items"
:key="item.id"
:item="item"
:index="index"
></my-component>性能优化技巧
避免在 v-for 中使用复杂计算或方法调用，可先在 computed 中处理数据：
computed: {
filteredItems() {
return this.items.filter(item => item.active);
}
}注意事项
避免在同一元素上同时使用 v-for 和 v-if。如需条件过滤，应改用 computed 属性预处理数据。
