Vue中动态Class实战示例
作者：醉鱼
这篇文章主要为大家介绍了Vue中动态Class的实战示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
需求
想实现一个假如有5个div块，默认都是灰色，鼠标悬浮到哪个div上，那个div就显示为黑色。
具体的实现业务逻辑可根据这个进行演变
设计
通过动态 class 类名来实现，实现鼠标悬浮到div时动态绑定class
版本
- Vue 3.3.4
- Node 20.9.0
代码
<template>
<div class="container">
<div v-for="(box, index) in boxes" :key="index" :class="'box'+ 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('.box'+index).addEventListener('mouseover', () => this.handleMouseOver(index));
this.$el.querySelector('.box'+index).addEventListener('mouseout', () => this.handleMouseOut(index));
});
}
};
</script>以上就是Vue中动态Class实战示例的详细内容，更多关于Vue动态Class的资料请关注脚本之家其它相关文章！