Vue项目实战(四) ：三级联动动态背景颜色和动态显示隐藏二三级分类（添加选中样式）

//TypeNav >>> index.vue
<template>
   <div class="type-nav">
      <div class="container">
        //按理来说@mousleave鼠标移除事件应该也写到h3标签上，但是因为要达到鼠标移到全部商品分类上时
        //也要保证第一个一级分类图书、音像、...是选中状态，所以需要在他们的父级上添加移除事件
        //这也叫做事件委派/事件代理
         <div @mousleave="leaveIndex">
            <h2>全部商品分类</h2>
            <div class="sort">
                <div class="all-sort-list2">
                    <div class="item" 
                         v-for="(c1, index) in categoryList" 
                         :key="c1.categoryId"
                         :class="{cur:currentIndex == index}">
                        <h3 @mouseenter="changeIndex(index)">
                           <a>{{ c1.categoryName }}</a>
                        </h3>
                        <div class="item-list clearfix" 
                             :style="{display:currentIndex == index ? 'block': 'none'}">
                           ....
                        </div>
                    </div>
                </div>
            </div>
         </div>
      </div>
   </div>
</template>

<script>
export default {
   name: 'TypeNav',
   data(){
      currentIndex: -1,
   },
   methods:{
      //鼠标进入修改响应式数据currentIndex属性
      changeIndex(index){
         console.log(index) //index是鼠标移上一级分类的某一个的索引值
         this.currentIndex = index
      },
      //一级分类鼠标移除事件的回调
      leaveIndex(){
         this.currentIndex = -1
      }
   }
}
</script>

<style scoped lang="less">
   .cur {
      background-color: pink;
   }
</style>