vue实现同一页面点击当前不同tab页展示不同内容并且选中变色

结果：
如下图

---

实例：

<template>
  <div class="contain">
    <div class="tab">
      <div
        class="tab-title"
        v-for="(item, index) in foodList"
        :key="index"
        @click="btnClick(index)"
      >
        <div :class="['tab-item', activeIndex === index ? 'change' : '']">
          {
   
   { item.name }}
        </div>
      </div>
    </div>
    <div class="main">
      <div class="sub-main" v-for="(item, index) in subFoodList" :key="index">
        <div class="sub-item">
          {
   
   { item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 假设后端返回的数组对象
      foodList: [
        {
          name: "肉类",
          children: [
            {
              name: "牛肉",
            },
            {
              name: "羊肉",
            },
            {
              name: "猪肉",
            },
            {
              name: "鸡肉",
            },
          ],
        },
        {
          name: "海鲜",
          children: [
            {
              name: "鲍鱼",
            },
            {
              name: "龙虾",
            },
            {
              name: "大闸蟹",
            },
            {
              name: "花螺",
            },
          ],
        },
        {
          name: "菜类",
          children: [
            {
              name: "菠菜",
            },
            {
              name: "冬瓜",
            },
            {
              name: "黄瓜",
            },
            {
              name: "青瓜",
            },
          ],
        },
        {
          name: "水果",
          children: [
            {
              name: "苹果",
            },
            {
              name: "香蕉",
            },
            {
              name: "菠萝",
            },
            {
              name: "西瓜",
            },
          ],
        },
      ],
      // 二级内容
      subFoodList: [],
      // 默认索引 0
      activeIndex: 0,
    };
  },
  methods: {
    btnClick(index) {
      console.log("ok");
      this.activeIndex = index;
      this.subFoodList = this.foodList[index].children;
    },
  },
  created() {
    this.subFoodList = this.foodList[this.activeIndex].children;
  },
};
</script>
<style lang="scss" scoped>
.contain {
  display: flex;
  justify-content: center;
  background-color: antiquewhite;
  flex-direction: column;
}
.tab {
  display: flex;
  justify-content: center;
  margin: 10px;
}
.tab-item {
  margin: 10px;
}
.main {
  display: flex;
  justify-content: center;
  background-color: beige;
}
.sub-main {
  margin: 10px;
}
.change {
  background-color: red;
}
</style>

---