持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

一级分类动态添加背景颜色效果图

需求分析：这是一个三级分类，当鼠标移入一级分类时，需要一个背景颜色，告诉用户你正在选择的分类名称，当鼠标移出时，背景颜色消失。在这里插入图片描述

第一种解决方案：采用css样式

核心思路：即是利用css中的hover方法，选择鼠标浮动其上的元素，并设置他的样式。简单方便 item:hover{ background:blue; }

全部代码

<!-- 商品分类导航 -->
  <div class="type-nav">
      <div class="container">
          <h2 class="all">全部商品分类</h2>
          <nav class="nav">
              <a href="###">服装城</a>
              <a href="###">美妆馆</a>
              <a href="###">尚品汇超市</a>
              <a href="###">全球购</a>
              <a href="###">闪购</a>
              <a href="###">团购</a>
              <a href="###">有趣</a>
              <a href="###">秒杀</a>
          </nav>
          <div class="sort">
              <div class="all-sort-list2">
                  <div class="item bo" v-for="(c1,index) in categoryList" :key="c1.categoryId">
                      <h3>
                          <a href="">{{c1.categoryName}}</a>
                      </h3>
                      <div class="item-list clearfix">
                          <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>

一级菜单item

 .all-sort-list{
	.item:hover{ //鼠标点击事件
		background:blue;
		}
}

第二种解决方案：通过JS完成

核心思路： js鼠标事件，鼠标移入（mouseenter）和鼠标移出（mouseleave）事件。

@mouseenter="changeIndex(index)：当鼠标指针穿过元素时，会发生 mouseenter 事件

@mouseleave="leaveIndex"：当鼠标指针移除元素时，会发生 mouseenter 事件

全部代码：

<template>
  <!-- 商品分类导航 -->
  <div class="type-nav">
    <div class="container">
        <!-- 事件委派|事件委托 -->
      <div @mouseleave="leaveIndex">//鼠标移出事件
        <h2 class="all">全部商品分类</h2>
        <div class="sort">
          <div class="all-sort-list2">
            <div
              class="item bo"
              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">
                <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>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "TypeNav",
  data() {
    //存储用户鼠标移上哪一个一级分类
    return {
      currentIndex: -1,
    };
  },
  //组件挂载完毕：可以向服务器发请求
  mounted() {
    //通知vuex发请求，获取数据，存储于数据库中
    this.$store.dispatch("categoryList");
  },
  computed: {
    ...mapState({
      //右侧需要的是一个函数，当使用这个计算属性的时候，右侧函数会立即执行一次
      //注入一个参数state，其实即为大仓库中的数据
      // categoryList:(state)=>{
      //     return state.home.categoryList;
      // }
      //简写
      categoryList: (state) => state.home.categoryList,
    }),
  },
  methods: {
    //鼠标进入修改响应式数据currentIndex属性
    changeIndex(index) {
      //index：鼠标移上某一个
      this.currentIndex = index;
    },
    //一级分类鼠标移除的事件回调
    leaveIndex() {
      this.currentIndex = -1;
    },
  },
};
</script>

<style scoped lang="less">
.type-nav {
  ~~~~~~~~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~~~
          &:hover {
            .item-list {
              display: block;
            }
          }
        }
        .cur {
          background: skyblue;
        }
      }
    }
  }
}
</style>

效果图

在这里插入图片描述

技术总结

选择鼠标指针浮动在其上的元素，并设置其样式：

a:hover
{ background-color:yellow;}

mouseenter：当鼠标指针穿过元素时，会发生 mouseenter 事件； mouseleave：当鼠标指针移除元素时，会发生 mouseleave 事件。
currentIndex: -1,因为接口返回值是数组的影响（索引），可以定义为-1，这样可以有效的避免和数组索引的值撞车。

Vue三级联动-动态背景颜色，两种解决方案