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放在同一个父盒子下面,把鼠标移出的事件给父盒子,这样鼠标只要不移出父盒子,蓝色背景就不会消失
称为事件的委派或者委托
这篇博客详细介绍了如何使用Vue.js来实现三级联动菜单中,一级分类在鼠标悬停时动态添加背景颜色的效果。通过数据绑定和事件监听,实现了鼠标移入和移出时背景色的切换。同时,通过事件委托避免了鼠标移出导致的背景色消失问题,确保在父级元素内鼠标移动背景色始终保持。此外,还讨论了如何优化这一过程,使得在全部商品分类被选中时,蓝色背景不会消失。

被折叠的 条评论
为什么被折叠?



