vue.js hover事件模拟

一、写在前面的废话
最近写毕设，前端用的 vue+element-ui，想实现hover()事件效果，但是怎么都没找到可以直接调用的，然后折腾了引入jquery，好一通折腾，千辛万苦引入成功，不再报 $ 未定义之后，心里一阵狂喜，想着就要实现了呢，然而，结果却是。。。what? 居然不执行！什么情况？不知道。。。哦，对，给出我是怎么调用的，万一是我用错了，错怪他了呢

$("td").hover (
  console.log('1')
  function () {
    console.log('2')
    $(this).addClass("hover")
  },
  function () {
    console.log('3')
    $(this).removeClass("hover")
  }
);

恩，基本上就是酱紫用的，打印结果是 1 ,也就是说，2 和 3 一个也没执行。。。。我的内心是崩溃的。。。然后放弃这个思路，放弃了 jquery ，老老实实用 vue 来实现吧

二、问题描述
我现在的需求是：写了一个靠左边的导航菜单，不激活的时候只显示每个菜单的小图标，激活的时候想要在小图标的右边显示图标对应的文字，菜单可以点开展示子菜单，恩，就是酱紫

三、问题未解决的效果
1）先看看他安静的像个美少女一样的图片

恩，对，未激活状态下，她就这么安静的躺在那
2）然后再看一张激活状态下不忍直视的效果图

就是酱紫，hover了好久都没成功，放弃。。。

四、问题解决

（1）先看效果图
1）安静的时候跟上面的一样
2）激活并且鼠标点开一个子菜单，啊，对这张只是把鼠标移到了有背景色的子菜单上，忘了点了，所以被选中的蓝色字还在默认菜单项上 =_=

3）选中一个子菜单并且未关闭的状态下（鼠标移出菜单）

4）关闭子菜单并且移出鼠标之后他就会继续安静的躺着了

（2）实现（只留下源代码里与此相关的重点部分）

hover用不了，但是可以把hover拆开成一进一出，这样就可以调用 vue 提供的方法了，就是麻烦了一点

1）HTML（用的element-ui）
① 用@（v-on的缩写）绑定事件监听器 官方文档
② :class 绑定 HTML 与 class ，也就是说，show 和 hide 这两个类是否被添加是根据 showText 和 hideText 两个属性值来决定的， true 则添加，false 则不添加 官方文档

<div @mouseover="overShow" @mouseout="outHide"> 
  <el-menu>
    <el-submenu index="checkbatch">
      <template slot="title"><i class="el-icon-document"></i>
        <span :class="{show:showText,hide:hideText}">批次信息</span>
      </template>
       <el-menu-item>全部批次信息查看</el-menu-item>
       <el-menu-item>接受中批次信息查看</el-menu-item>
       <el-menu-item>审核中批次信息查看</el-menu-item>
       <el-menu-item>已完成批次信息查看</el-menu-item>
    </el-submenu>
  </el-menu>
 </div>

2）js

 data () {
    return {
      showText: false,
      hideText: true
    }
  },
  methods: {
    overShow () {
      this.showText = !this.showText
      this.hideText = !this.hideText
    },
    outHide () {
      this.showText = !this.showText
      this.hideText = !this.hideText
    }
  }

3）css

.show{
    display: block;
}
.hide{
    display: none;
}

4）补充说明：
在我这里这么写之后，小图标和对应的汉字相对位置不对，但是用 css 的 display 调一调相对位置就可以了

好啦~~~折磨我这么久的hover事件模拟就这样解决啦，希望可以帮到有同样需求的小伙伴