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