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

Vue中通过鼠标移入移出来添加或取消class样式（active）的相关教程结束。