vue3for循环遍历数组
时间: 2023-09-13 12:11:20 浏览: 58
在 Vue 3 中,使用 `v-for` 指令进行循环遍历数组的方式与 Vue 2 中有所不同,具体如下:
```html
<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 中的做法不同。如果需要遍历对象,可以使用以下语法:
```html
<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"` 指定每个列表项的唯一标识符,以提高性能。