vue3的v-for

在Vue3中，v-for指令的用法与Vue2相同。你可以通过v-for指令来遍历数组或对象，并根据每个元素生成相应的内容。在Vue3的v-for指令中，你可以使用以下几种方式来使用v-for：

1. 基本使用：使用`item in 数组`的格式来遍历数组。例如：

<li v-for="item in movies">{{ item }}</li>

这将在每个li标签中显示movies数组的每个元素。

2. 遍历对象：使用`value in object`的格式来遍历对象。例如：

<li v-for="value in info">{{ value }}</li>

这将在每个li标签中显示info对象的每个属性值。

3. 遍历对象并获取键名：使用`(value, key) in object`的格式来遍历对象，并同时获取键名和属性值。例如：

<li v-for="(value, key) in info">{{ key }}: {{ value }}</li>

这将在每个li标签中显示info对象的每个属性名和属性值。

请注意，在Vue3中，当v-if和v-for同时存在于一个节点上时，v-if的条件无法访问v-for的作用域内定义的变量别名。因此，在使用v-if和v-for时，请注意变量的作用域。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue3【列表渲染】v-for 详细介绍（vue中的“循环”）](https://blog.csdn.net/XSL_HR/article/details/127312632)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue3中的v-for](https://blog.csdn.net/qq_44482048/article/details/128728009)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]