动态改变背景颜色

第一种，用CSS写

        //第一种，用CSS写的
        //.item:hover{
        //  background-color: skyblue;
        //}

第二种，用JS写

    <div class="container">
      <!--   事件委派|事件委托   -->
      <div @mouseleave="leaveIndex">
        <h2 class="all">全部商品分类</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 href="">{{ c1.categoryName }}</a>
              </h3>
              <!--      二级、三级联动        -->
              <div class="item-list clearfix" :style="{ display:currentIndex==index?'block':'none' }">
                <div class="subitem" v-for="(c2,index) in c1.categoryChild" :key="c2.categoryId">
                  <dl class="fore">
                    <dt>
                      <a href="">{{ c2.categoryName }}</a>
                    </dt>
                    <dd>
                      <em v-for="(c3,index) in c2.categoryChild" :key="c3.categoryId">
                        <a href="">{{ c3.categoryName }}</a>
                      </em>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


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

export default {
  name: 'TypeNav',
  data() {
    return {
      //存储用户鼠标触选的一级分类
      currentIndex: -1
    }
  },
  methods: {
    //  鼠标进入修改响应式数据currentIndex属性
    changeIndex(index) {
      //index:用户鼠标触选的一级分类的元素的索引值
      this.currentIndex = index
    },
    //一级分类鼠标移出的事件回调
    leaveIndex() {
      this.currentIndex = -1
    }
  }
}
</script>

        //第二种，用JS写的
        .cur {
          background-color: skyblue;
        }

通过JS通过JS控制样式的显示与隐藏

<div class="item-list clearfix" :style="{ display:currentIndex==index?'block':'none' }">
</div>

参考博主：JS控制HTML元素的显示和隐藏 - Mr. Coding - 博客园