vue导航切换

<template>
  <div class="container">
    <div class="top-list">
      <ul>
        <li
          class="top-li"
          v-for="(item,index) in topList"
          :key="index"
          :class="{ 'top-li-active':index === topIndex }"
          @click="topSwitch(index)"
        >
          {{item.title}}
        </li>
      </ul>
      <ul>
        <li
          class="bottom-li"
          v-for="(item,index) in bottomList"
          :key="index"
          :class="{ 'bottom-li-active':index == bottomIndex }"
          @click="bottomSwitch(index)"
        >
          {{item.title}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data(){
      return{
        list:[],
        topList:[],
        bottomList:[],
        topIndex:0,
        bottomIndex:0,
      }
    },
    created(){
      axios.get('../../static/list.json').then(res=>{
        console.log(res)
        res.data.data.map((item,index)=>{
          this.list=res.data.data ;
          let obj={};
          obj.title=item.title;
          this.topList.push(obj);
          if(index===0){
            this.bottomList=item.children;
          }
        })
      })
    },
    methods:{
      topSwitch(index){
        this.topIndex = index;
        this.bottomIndex = 0;
        this.bottomList = [];
        this.list.map((item,ind)=>{
          if(ind===index){         //数据下标的那一项 === 当前下标
            this.bottomList=item.children;   //赋值二级菜单的数据
          }
        })
      },
      bottomSwitch(index){
        this.bottomIndex = index;
      }
    }

  }
</script>

<style>
  ul {list-style-type: none;padding: 0;}
  li {display: inline-block;margin: 0 10px;font-weight: bold;}
  .top-li-active{color: red;}
  .bottom-li-active{color: greenyellow;}
</style>

效果：