Vue实现tab切换

Vue实现tab切换

一、实现效果图

备注：上标题控制下标题

二、实现思路
通过给上面的标题定义（@click）事件，点击获取下标的方式实现高亮

三、代码实现

data数据

methods事件

四、代码实现
html

 <!-- 总体态势 区域交通 微观交通 -->
    <div class="area-title">
      <ul>
        <li
          v-for="(item, index) in titleArr" :key="item.id"
          :class="activeIndex == index ? 'active' : ''"
          @click="changTitle(item,index)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="bottom-box">
      <div class="group-title">
        <ul>
          <li v-for="(item, index) in groupNewArr" :key="item.id" :class="activeBottomIndex == index ? 'active' : ''" @click="changeBottomTitle(index)">{{item.name}}</li>
        </ul>
      </div>
    </div>

export default

export default {
  //name:"Index",
  components: {
    LeftBox,
    RightBox,
  },
  data() {
    return {
      activeIndex: 0,
      activeBottomIndex: 0, //下面导航下标
      //顶部标题
      titleArr: [
        { name: "总体态势", id: 4 },
        { name: "区域交通", id: 1 },
        { name: "微观交通", id: 2 },
      ],
      // 底部标题
      groupArr: [
        {
          type: 4,
          groupTypeArr: [
            { name: "总体态势", id: 11 },
            { name: "人口分布", id: 12 },
            { name: "出行需求", id: 13 },
            { name: "城市结构", id: 14 },
          ],
        },
        { type: 1, 
          groupTypeArr: [{ name: "区域交通", id: 21 }] },
        {
          type: 2,
          groupTypeArr: [
            { name: "短途态势", id: 31 },
            { name: "人口分布", id: 32 },
            { name: "出行需求", id: 33 },
          ],
        },
      ],
      groupNewArr: [],
    };
  },
  methods: {
    // 点击顶部栏切换标题
    changTitle(item,index) {
      this.activeIndex = index;
     // console.log(item)
     //console.log(index) 0  1  2
     this.activeBottomIndex=0;
       this.groupArr.forEach((elem,index) => {
       //console.log(elem.type)  0  1  2
      //console.log(elem.groupTypeArr) 
      if(item.id == elem.type){
         this.groupNewArr = elem.groupTypeArr
         //console.log(this.groupNewArr)
      }
       });
    },
    changeBottomTitle(index){
      this.activeBottomIndex = index
    },
  },
  mounted(){
     this.groupNewArr=this.groupArr[0].groupTypeArr
  }
};
</script>