Vue3 v-for 指令
Vue3 内置指令v-for 指令用于基于源数据多次渲染元素，是 Vue 中实现列表渲染的核心指令。
基本说明
v-for 指令基于一个数组或对象重复渲染元素。它允许你重复渲染一组相似的元素，并可以使用来自数据源的值。
- 期望类型: Array | Object | number | string | Iterable
- 作用: 列表渲染，基于源数据多次渲染元素。
基本语法
实例
<!-- 数组遍历 -->
<li v-for="item in items">{{ item }}</li>
<!-- 带索引的遍历 -->
<li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
<!-- 对象遍历 -->
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
<!-- 数字遍历 -->
<li v-for="n in 5">{{ n }}</li>
<li v-for="item in items">{{ item }}</li>
<!-- 带索引的遍历 -->
<li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
<!-- 对象遍历 -->
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
<!-- 数字遍历 -->
<li v-for="n in 5">{{ n }}</li>
使用场景
1、数组遍历
实例
<template>
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
{{ index + 1 }}. {{ fruit }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
fruits: ['苹果', '香蕉', '橙子', '葡萄']
}
}
}
</script>
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
{{ index + 1 }}. {{ fruit }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
fruits: ['苹果', '香蕉', '橙子', '葡萄']
}
}
}
</script>
2、对象数组遍历
实例
<template>
<table>
<tr v-for="person in people" :key="person.id">
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
people: [
{ id: 1, name: '张三', age: 25 },
{ id: 2, name: '李四', age: 30 }
]
}
}
}
</script>
<table>
<tr v-for="person in people" :key="person.id">
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
people: [
{ id: 1, name: '张三', age: 25 },
{ id: 2, name: '李四', age: 30 }
]
}
}
}
</script>
key 的重要性
v-for 中强烈建议为每个循环项提供唯一的 key 属性，这有助于 Vue 高效地更新列表。
实例
<!-- 使用 id 作为 key（推荐） -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>