如何在vue 2中循环遍历对象数组和嵌套对象

在Vue 2中，可以使用v-for指令来循环遍历对象数组和嵌套对象。v-for指令可以在模板中将一个数组的每个元素或一个对象的每个属性重复渲染。

循环遍历对象数组：

假设有一个对象数组，命名为items，每个对象有两个属性：name和age。可以使用v-for指令来遍历该数组，并在模板中显示每个对象的属性。

<template>
  <div>
    <div v-for="item in items" :key="item.name">
      <p>Name: {{ item.name }}</p>
      <p>Age: {{ item.age }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 },
        { name: 'Bob', age: 35 }
      ]
    };
  }
};
</script>

在上面的例子中，v-for指令绑定到items数组上，使用item作为循环变量。通过:item in items来定义循环的范围。:key="item.name"用于为每个循环项提供唯一的key，以优化渲染性能。

循环遍历嵌套对象：

如果对象数组中的每个对象还包含一个嵌套对象，可以使用两个嵌套的v-for指令来遍历。

<template>
  <div>
    <div v-for="item in items" :key="item.name">
      <p>Name: {{ item.name }}</p>
      <p>Age: {{ item.age }}</p>
      <p v-for="detail in item.details" :key="detail.id">
        Detail: {{ detail.info }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          name: 'John',
          age: 25,
          details: [
            { id: 1, info: 'Detail 1' },
            { id: 2, info: 'Detail 2' }
          ]
        },
        {
          name: 'Jane',
          age: 30,
          details: [
            { id: 3, info: 'Detail 3' },
            { id: 4, info: 'Detail 4' }
          ]
        }
      ]
    };
  }
};
</script>

在上面的例子中，除了外层的v-for指令遍历对象数组外，内层的v-for指令遍历每个对象的details属性，即嵌套对象数组。通过:item in item.details来定义内层循环的范围。

这样就可以在Vue 2中循环遍历对象数组和嵌套对象了。请注意，以上示例中的代码是基于Vue 2的语法，如果使用Vue 3，语法可能会有所不同。