首页vue中使用foreach遍历一个数组

vue中使用foreach遍历一个数组

时间: 2023-11-24 07:08:04 浏览: 130

在Vue中，可以通过v-for指令来遍历一个数组，并使用forEach方法对数组进行操作，示例代码如下： ```html <template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: "Apple" }, { id: 2, name: "Banana" }, { id: 3, name: "Orange" }, ], }; }, mounted() { this.items.forEach((item) => { console.log(item.name); }); }, }; </script> ``` 在mounted生命周期函数中，使用forEach方法对items数组进行遍历，并输出每个item的name属性。在模板中使用v-for指令来遍历items数组，根据每个item的id属性来设置key值，以提高渲染效率。

阅读全文