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