friends: [
        {
          name: "同学",
          list: [
            { name: "祥子", sign: "让自己放肆的笑", online: true },
            { name: "静静", sign: "时光是陪你最久的爱人", online: true },
            { name: "影子", sign: "不忘初心,方得始终", online: true },
          ],
        },
        {
          name: "家人",
          list: [
            { name: "爸爸", sign: "家和万事兴", online: true },
            { name: "妈妈", sign: "平安是福", online: true },
            { name: "大姐", sign: "", online: false },
            { name: "二姐", sign: "今天天气不错,遛娃", online: false },
          ],
        },
        {
          name: "朋友",
          list: [
            { name: "老船长", sign: "相信别人往往比相信自己更简单", online: true },
            { name: "老马", sign: "菩提本无树,明镜亦非台", online: true },
            { name: "艳子", sign: "春有百花秋有月，夏有凉风冬有雪。若无闲事挂心头，便是人间好时节。", online: true },
            { name: "老化", sign: "年轻没有失败,奋斗成就男人!", online: false },
          ],
        },
      ],

<template>
  <!-- 仿 QQ 列表 -->
  <li class="yzs-list">
    <h3>{{ person.name }}</h3>
    <span>{{ person.sign }}</span>
  </li>
</template>
<script>
export default {
  props: {
    person: {
      required: true,
      type: Object,
    },
  },
};
</script>
<style lang="less" scoped>
.yzs-list {
  text-align: left;
  background-color: white;
  list-style: none;
  color: #666;
  border-bottom: 1px solid #333;
}
</style>

<template>
  <div class="group-root" @click="groupCk">
    <div class="group-top">
      <span :class="{ arowdown: isOpen }"> &gt; </span>
      <span>{{ groupOb.name }}</span>
      <span class="rt">{{ onlineNumber }}/{{ groupOb.list.length }}</span>
    </div>
    <ul v-show="isOpen">
      <Component-List
      v-for="(friendList, index) in  groupOb.list" :key="index"
        :person="friendList"
      ></Component-List>
    </ul>
  </div>
</template>
<script>
import ComponentList from "@/components/list";
export default {
  props: {
    groupOb: {
      type: Object,
    }
  },
  data: function () {
    return {
      isOpen: false,
    };
  },
  computed: {
    onlineNumber() {
      // 还有个.list
      return this.groupOb.list.filter((item) => {
        return item.online;
      }).length;
    },
  },
  methods: {
    groupCk() {
      this.isOpen = !this.isOpen;
    },
  },
  components: {
    ComponentList,
  }
};
</script>
<style lang="less" scoped>
.group-root {
  text-align: left;
  .group-top {
    background-color: #dedede;
    height: 50px;
    line-height: 50px;
    padding: 5px;
    margin-bottom: 5px;
  }
  .rt {
    float: right;
  }
  /* 注意名字不要带- */
  .arowdown {
    transform: rotate(90deg);
    display: inline-block;
  }
}
</style>

<Component-Group
        v-for="(groupInfo, index) in friends"
        :key="index"
        :groupOb="groupInfo"
      >
      </Component-Group>