vue的v-for循环遍历数组和数组中的数组

<template>
    <div v-for="(item, index) in arr" :key="index">{{ index }}{{ item }}</div>
    <hr />
    <div v-for="(item, index) in arr1" :key="index">
      <div>{{ item }}</div>
      <div>{{ item.name }}</div>
      <div>{{ item.age }}</div>
    </div>
    <hr />
    <div v-for="(item, index) in arr2" :key="index">
      <div>{{ item }}</div>
      <div>{{ item.name }}</div>
      <div>{{ item.firends }}</div>
      <div v-for="item1 in item.firends" :key="item1">
        <div>{{ item1.name }}</div>
      </div>
    </div>
  </div>
</template>

  data() {
    return {
      list: [],
      arr: ['a', 'b', 'c'],
      arr1: [
        { name: 'aaa', age: 20 },
        { name: 'bbb', age: 21 },
        { name: 'ccc', age: 22 }
      ],
      arr2: [
        { name: 'aaa', firends: [{ name: 'af1' }, { name: 'af2' }] },
        { name: 'bbb', firends: [{ name: 'bf1' }, { name: 'bf2' }] },
        { name: 'ccc', firends: [{ name: 'cf1' }, { name: 'cf2' }] }
      ]
    };

 显示效果：