vue循环数组实现
Vue 循环数组的实现方法
在 Vue 中，可以使用 v-for 指令来循环遍历数组。v-for 指令基于一个数组来渲染一个列表，语法形式为 item in items 或 (item, index) in items，其中 items 是源数据数组，item 是被迭代的数组元素的别名，index 是可选参数，表示当前项的索引。
基本用法
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
};
}
};
</script>带索引的用法
如果需要获取当前项的索引，可以在 v-for 中添加第二个参数：
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index }}: {{ item.name }}
</li>
</ul>
</div>
</template>使用 key 的重要性
在使用 v-for 时，建议为每个节点提供一个唯一的 key 属性。这有助于 Vue 识别每个节点的身份，从而重用和重新排序现有元素，提高渲染性能。key 的值应该是唯一的标识符，通常是数据的唯一 ID。
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>循环嵌套数组
如果需要循环嵌套数组，可以在模板中嵌套使用 v-for：
<template>
<div>
<div v-for="group in groups" :key="group.id">
<h3>{{ group.name }}</h3>
<ul>
<li v-for="item in group.items" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
groups: [
{
id: 1,
name: 'Group 1',
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
},
{
id: 2,
name: 'Group 2',
items: [
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' }
]
}
]
};
}
};
</script>循环数字范围
v-for 也可以用于循环一个数字范围：
<template>
<div>
<span v-for="n in 5" :key="n">
{{ n }}
</span>
</div>
</template>循环对象
除了数组，v-for 还可以用于循环对象的属性：
<template>
<div>
<ul>
<li v-for="(value, key) in object" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
object: {
name: 'John',
age: 30,
city: 'New York'
}
};
}
};
</script>注意事项
- 避免在同一元素上同时使用
v-for和v-if，因为v-for的优先级高于v-if。如果需要条件渲染，可以将v-if放在外层元素上。 - 如果数据是动态变化的，确保
key的值是稳定的，避免使用随机数或索引作为key（除非列表是静态的）。 - 对于大型列表，可以考虑使用虚拟滚动技术（如
vue-virtual-scroller）来提高性能。
