vue用forEach遍历对象数组

可以使用以下代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 }
      ]
    }
  },
  mounted() {
    this.items.forEach(item => {
      console.log(item.name)
    })
  }
}
</script>

在 mounted 钩子函数中使用 forEach 遍历对象数组，输出每个对象的 name 属性。

相关问题

vue foreach循环遍历数组

Vue提供了一个很方便的方法来遍历数组，就是使用v-for指令，它会根据提供的数组中的每个项目来创建一个新的渲染上下文。例如：<ul> <li v-for="item in items">{{ item.message }}</li> </ul>

vue用foreach遍历数组push到新数组中时每次push的数组都自动排在新数组末尾

在使用`forEach`方法遍历数组时，每次循环都会将指定元素push到新数组的末尾。如果你想要将指定元素插入到新数组的指定位置，可以使用`splice`方法。

下面是一个示例代码：

let arr = [1, 2, 3, 4, 5]
let newArr = []

arr.forEach((item) => {
  if (item % 2 === 0) {
    newArr.splice(1, 0, item) // 在第二个位置插入元素
  } else {
    newArr.push(item)
  }
})

console.log(newArr) // [1, 4, 2, 3, 5]

在这个例子中，我们使用`forEach`方法遍历原数组，将偶数插入到新数组的第二个位置，将奇数push到新数组的末尾。使用`splice`方法，在第二个位置插入元素，然后后面的元素依次后移。最终输出结果为[1, 4, 2, 3, 5]。