vue实现循环功能
使用 v-for 指令实现循环
Vue 的 v-for 指令是用于循环渲染列表的核心方法。语法为 v-for="(item, index) in items"，其中 items 是数据源数组，item 是当前遍历的元素，index 是可选索引值。
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }} - {{ index }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'Apple' },
{ name: 'Banana' },
{ name: 'Cherry' }
]
};
}
};
</script>循环渲染对象属性
v-for 也可遍历对象的属性，语法为 v-for="(value, key, index) in object"。
<template>
<ul>
<li v-for="(value, key) in user" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
user: {
name: 'Alice',
age: 25,
role: 'Developer'
}
};
}
};
</script>使用 key 提升性能
为每个循环项添加唯一的 :key 属性，通常使用 id 或 index，帮助 Vue 高效更新 DOM。
<template>
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
</template>循环渲染数字范围
通过 v-for="n in 10" 可以循环固定次数，渲染数字 1 到 10。
<template>
<span v-for="n in 5" :key="n">
{{ n }}
</span>
</template>结合条件渲染
在循环中可嵌套 v-if，但推荐使用计算属性过滤数据，避免性能问题。
<template>
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Apple', active: true },
{ id: 2, name: 'Banana', active: false }
]
};
},
computed: {
filteredItems() {
return this.items.filter(item => item.active);
}
}
};
</script>嵌套循环
多层数据结构可通过嵌套 v-for 实现。
<template>
<div v-for="group in groups" :key="group.id">
<h3>{{ group.name }}</h3>
<ul>
<li v-for="member in group.members" :key="member.id">
{{ member.name }}
</li>
</ul>
</div>
</template>使用 <template> 标签分组
<template> 标签可包裹多个元素进行循环，但不渲染为实际 DOM 节点。
<template>
<template v-for="item in items" :key="item.id">
<p>{{ item.title }}</p>
<span>{{ item.desc }}</span>
</template>
</template>以上方法覆盖了 Vue 中循环功能的常见场景，根据需求选择合适的方式即可。
