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放在同一个父盒子下面，把鼠标移出的事件给父盒子，这样鼠标只要不移出父盒子，蓝色背景就不会消失
称为事件的委派或者委托
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/16969.html