三级列表的动态背景颜色

1.完成三级联动的背景颜色，鼠标移上去的时候背景为蓝色

（1）完成一级分类动态添加背景颜色

第一种解决方案：采用样式完成（可以）

第二种解决方案，通过js完成

练习JS：

0-15有16个组件，一级分类有16个

(1)   <!-- 给h3加一个鼠标移动的接口 ，在下面接一个methods-->

    <h3 @mouseenter="changeIndex(index)" >

(2)

data() {

        return {

            //存储用户鼠标移上哪一个一级分类,初始值一定为-1，如果为0，那么打开页面第一个一级分类的背景就是蓝色，-1代表谁都不是

            currentIndex: -1

        }

    },

(3)  methods: {

        //鼠标进入修改响应式数据currentIndex属性

        changeIndex(index) {

            //index:鼠标移上某一个一级分类的元素的索引值

            this.currentIndex = index;

        },

    },

(4)加个蓝色的样式

在最后

    .cur {

                    background: skyblue;

    }

1.2当鼠标移出的时候，让蓝色背景消失

（1）<!-- 给h3加一个鼠标移出的响应接口 ,鼠标移出的时候会触发这个响应leaveIndex-->

  <h3 @mouseenter="changeIndex(index)"  @mouseleave="leaveIndex">

（2）

methods: {

     //一级分类鼠标移出事件的回调

        leaveIndex(){

            this.currentIndex = -1;

                    }

    },

1.3，当鼠标移动到全部商品分类的时候，蓝色不会消失

把h2和h3放在同一个父盒子下面，把鼠标移出的事件给父盒子，这样鼠标只要不移出父盒子，蓝色背景就不会消失

称为事件的委派或者委托