vue用forEach遍历对象数组

可以使用 Vue.js 的 `v-for` 指令来遍历对象数组，语法如下：

<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` 来优化性能。

相关问题

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]。