样图:
思路:
动态绑定class,用@mouseenter()绑定一个事件,并将列的索引index传入,然后在data里建一个变量来保存,默认-1 0的话页面刷新后第一个背景色就已经显示了
html
<div class="item" v-for="(one, index) in categoryList" :key="one.categoryId" :class="{ cur: bgcolor === index }" > <h3 @mouseenter="changebgcolor(index)" @mouseleave="clearcolor"> 如果h3还有同级标签。可将鼠标移出的方法委派给父级标签 <a href="">{{ one.categoryName }}</a> </h3> </div>
js
data() { return { bgcolor: -1, }; }, methods: { // 鼠标移动上更换背景色 changebgcolor(index) { // index:鼠标移上的元素的索引值 this.bgcolor = index; }, //鼠标移出,还原颜色 clearcolor(){ this.bgcolor = -1 } },
css
.cur { background-color: skyblue; }