vue循环遍历数组对象
时间: 2023-10-01 09:04:56 浏览: 97
vue使用map代替Aarry数组循环遍历
你可以使用 Vue.js 的 `v-for` 指令来循环遍历数组对象。以下是一个示例:
```html
<div id="app">
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }} - {{ item.age }}
</li>
</ul>
</div>
```
```javascript
new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 35 }
]
}
})
```
在上面的示例中,我们使用 `v-for` 指令来循环遍历 `items` 数组中的每个对象,并使用 `:key` 绑定每个对象的 `id` 属性作为唯一的键。在模板中,我们可以使用 `{{ item.name }}` 和 `{{ item.age }}` 来访问每个对象的属性,并在每个 `<li>` 元素中显示它们。
阅读全文