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

Posted 2023-03-05 coderkey

结果：
如下图

---

实例：

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

---