企业网站优化与推广,三明建设网站,168义乌加工网,广州花都网站开发效果展示
需求
想实现一个假如有5个div块#xff0c;默认都是灰色#xff0c;鼠标悬浮到哪个div上#xff0c;那个div就显示为黑色。
具体的实现业务逻辑可根据这个进行演变
设计
通过动态 class 类名来实现#xff0c;实现鼠标悬浮到div时动态绑定class
版本 Vue 3.…效果展示
需求
想实现一个假如有5个div块默认都是灰色鼠标悬浮到哪个div上那个div就显示为黑色。
具体的实现业务逻辑可根据这个进行演变
设计
通过动态 class 类名来实现实现鼠标悬浮到div时动态绑定class
版本 Vue 3.3.4 Node 20.9.0
代码
template div classcontainer div v-for(box, index) in boxes :keyindex :classbox index:style{ color: box.color, backgroundColor: box.backgroundColor } {{ box.content }} /div /div /template script export default { data() { return { boxes: [ { content: Box 1, color: white, backgroundColor: grey }, { content: Box 2, color: white, backgroundColor: grey }, { content: Box 3, color: white, backgroundColor: grey }, { content: Box 4, color: white, backgroundColor: grey }, { content: Box 5, color: white, backgroundColor: grey } ] }; }, methods: { handleMouseOver(index) { console.log(鼠标移入,index)this.boxes[index].backgroundColor black; this.boxes[index].color white; }, handleMouseOut(index) { console.log(鼠标移出,index)this.boxes[index].backgroundColor grey; this.boxes[index].color white; } }, mounted() { this.boxes.forEach((box, index) { console.log(页面初始化,box,index)this.$el.querySelector(.boxindex).addEventListener(mouseover, () this.handleMouseOver(index)); this.$el.querySelector(.boxindex).addEventListener(mouseout, () this.handleMouseOut(index)); }); } }; /script