Vue中通过鼠标移入移出来添加或取消class样式(active)
基础知识:
先写一下vue中鼠标移入移出的基础知识,移入的触发事件是 @mouseenter,移出的触发事件是@mouseleave,知道这两个方法就简单了
基础知识的例子
<div class="index_tableTitle clearfix" v-for="(item,index) in table_tit">
<div class="indexItem">
<span :title="item.name">{{item.name}}</span>
<span class="mypor">
<i class="icon" @mouseenter="enter(index)" @mouseleave="leave()"></i>
<div v-show="seen&&index==current" class="index-show">
<div class="tip_Wrapinner">{{item.det}}</div>
</div>
</span>
</div>
</div>
export default {
data(){
return{
seen:false,
current:0
}
},
methods:{
enter(index){
this.seen = true;
this.current = index;
},
leave(){
this.seen = false;
this.current = null;
}
}
}
然后通过例子来讲一下怎么通过鼠标的移入移出来添加和取消class样式
1.首先HTML绑定事件,加入或者移出class为active
2.通过触发不同的方法来修改dom的class名字,从而控制不同的样式
例子
<template>
<section class="p-10 cursor-pointer">
<div @mouseenter="changeActive($event)" @mouseleave="removeActive($event)">
<h1>HAPPY</h1>
</div>
</section>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
changeActive($event) {
$event.currentTarget.className = 'active';
},
removeActive($event) {
$event.currentTarget.className = '';
}
}
};
</script>
<style lang="scss">
.active {
color: red;
}
</style>
效果
上面的例子效果是鼠标移上去字体为红色,移走以后恢复为黑色,跟JQuery的修改class道理是一样的,这里只是简单的例子,复杂的样式,active样式可以自己写
嗯,就酱~~
参考https://www.jb51.net/article/146107.htm