vue用forEach遍历对象数组
时间: 2024-05-15 09:13:34 浏览: 96
详解vue数组遍历方法forEach和map的原理解析和实际应用
5星 · 资源好评率100%
可以使用 Vue.js 的 `v-for` 指令来遍历对象数组,语法如下:
```html
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ index }} - {{ item.name }} - {{ item.age }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'Tom', age: 20 },
{ name: 'Jerry', age: 18 },
{ name: 'Mary', age: 25 }
]
}
}
}
</script>
```
在上面的例子中,我们先在 `data` 属性中定义了一个对象数组 `items`,然后使用 `v-for` 指令来遍历这个数组。在 `v-for` 中,我们使用 `(item, index) in items` 的语法来遍历对象数组,`item` 表示当前遍历到的对象,`index` 表示当前对象在数组中的索引值。最后使用 `:key` 绑定 `index` 来优化性能。
阅读全文