实现三级菜单

   <div class="sort">
        <div class="all-sort-list2">
          <div class="item" v-for="c1 in categoryList" :key="c1.categoryId">
            <h3>
              <a href="">{{c1.categoryName}}</a>
            </h3>
            <div class="item-list clearfix">
              <div class="subitem" v-for="c2 in c1.categoryChild" :key="c2.categoryId">
                <dl class="fore">
                  <dt>
                    <a href="">{{c2.categoryName}}</a>
                  </dt>
                  <dd>
                    <em v-for="c3 in c2.categoryChild " :key="c3.categoryId">
                      <a href="">{{c3.categoryName}}</a>
                    </em>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';


export default {
    name:'TypeNav',
    //组件挂载完毕:可以向服务器发送请求
    mounted() {
      //通知Vuex发请求,获取数据,储存与仓库中
      this.$store.dispatch('home/categoryList');
    },
    computed: {
      ...mapState({
        // categoryList:(state)=>{
        //   return state.home.categoryList;
        // }
        //简写
        categoryList:state =>state.home.categoryList
      })
    },
};
</script>

const actions ={
    //通过api里面接口发送请求 {{commit}} 解构赋值对应context.commit
   async categoryList({commit}){
        let result = await reqCategoryList()
        if(result.code==200){
            commit("CATEGORYLIST",result.data)
        }
    }
};

//菜单背景通过控制是否有class cur 来控制样式

  methods: {
    changeIndex(index){
      this.currentIndex = index
    },
    leaveIndex(){
      this.currentIndex = -1
    }
  },

 <div class="item" v-for="(c1,index) in categoryList" :key="c1.categoryId" :class="{cur:currentIndex == index}">
  <div @mouseleave="leaveIndex">
 <h3 @mouseenter="changeIndex(index)" >

@mouseleave鼠标离开触发回调, @mouseenter鼠标进入触发回调

//二级标签展示
通过css鼠标放上把displa样式改成block:

          &:hover {
            .item-list {
              display: block;
            }
          }

通过js展示
<div class="item-list clearfix" :style="{display:currentIndex == index? 'block':'none'}">