vue3for循环遍历数组

在 Vue 3 中，使用 v-for 指令进行循环遍历数组的方式与 Vue 2 中有所不同，具体如下：
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
items: ['apple', 'banana', 'orange']
}
}
}
</script>
登录后复制
在上面的代码中，我们使用 v-for 指令遍历了一个数组 items，并将数组中的每个元素渲染为一个列表项。v-for 指令中的 (item, index) 表示循环遍历数组 items，并将每个元素赋值给变量 item，同时将当前元素的索引赋值给变量 index。在每个列表项中，我们使用 {{ item }} 显示当前元素的值，通过 :key="index" 指定每个列表项的唯一标识符，以提高性能。
需要注意的是，在 Vue 3 中，我们可以使用 v-for 指令直接遍历对象，这与 Vue 2 中的做法不同。如果需要遍历对象，可以使用以下语法：
<template>
<div>
<ul>
<li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
obj: {
name: 'Tom',
age: 18,
gender: 'male'
}
}
}
}
</script>
登录后复制
在上面的代码中，我们使用 v-for 指令遍历了一个对象 obj，并将对象中的每个键值对渲染为一个列表项。v-for 指令中的 (value, key) 表示循环遍历对象 obj，并将每个键值对的值赋值给变量 value，同时将当前键值对的键赋值给变量 key。在每个列表项中，我们使用 {{ key }}: {{ value }} 显示当前键值对的键和值，通过 :key="key" 指定每个列表项的唯一标识符，以提高性能。