v-for遍历数组中的数组
时间: 2023-09-27 22:08:58 浏览: 90
v-for遍历数组中的数组可以使用两个嵌套的v-for指令,第一个指令用于遍历外层数组,第二个指令用于遍历内层数组。例如:
```
<div v-for="arr in outerArray">
<div v-for="item in arr">
{{item}}
</div>
</div>
```
这样就可以遍历外层数组outerArray中的每一个数组,并遍历每个数组中的元素item。
相关问题
v-for 遍历数组
v-for 是 Vue.js 中的一个指令,用于遍历数组或对象并渲染数据。它的基本语法如下:
```html
<div v-for="(item, index) in items" :key="index">
{{ item }}
</div>
```
其中,`items` 是要遍历的数组或对象,`item` 是当前遍历到的元素,`index` 是当前元素的索引。`:key` 是必须的属性,用于帮助 Vue.js 更高效地渲染列表。
v-for 遍历json数组
当你需要遍历 JSON 数组时,同样可以使用 Vue.js 框架的 v-for 指令。假设你有如下的 JSON 数组:
```json
[
{
"name": "John Doe",
"age": 30,
"email": "johndoe@example.com"
},
{
"name": "Jane Smith",
"age": 25,
"email": "janesmith@example.com"
},
{
"name": "Bob Johnson",
"age": 35,
"email": "bobjohnson@example.com"
}
]
```
你可以使用 v-for 指令来遍历它:
```html
<div v-for="item in jsonArray" :key="item.email">
<p>Name: {{ item.name }}</p>
<p>Age: {{ item.age }}</p>
<p>Email: {{ item.email }}</p>
</div>
```
在上面的例子中,item 是数组中的每个元素对象,你可以通过 item.key 访问对象中的键值对。注意要为每个遍历的元素设置一个唯一的 key 值,这里使用了 item.email 作为 key。根据实际需求,你可以自定义模板来展示 JSON 数组中的数据。
阅读全文