vue中通过移入移出来改变元素样式的方法

效果：

以下场景中用的是elementUI中的 el-table 。当鼠标移入当行的群成员数量的时候，数字变蓝色，移出恢复默认颜色

方法一：

1.声明一个变量 比如说 current：1，当 current = 1 时 active 样式不显示。反之，当current = 0 的时候，显示active 样式

2.写一个 active 样式，模板中绑定类名

 :class = "current === 0 ? 'active' : '' "

3.给元素绑定移入移出事件

4.移入时需要添加 active的样式，在移入事件中 修改 current = 0

5.移出时需要去除active的样式，在移出事件中修改 current = 1

（这个办法适合在有循环遍历的时候时候，因为需要传递一个index进去来知道当前控制的是哪一个元素）

在 elementUI 的 el-table-column 中使用以上办法，可以使用 slot-scope 插槽获取当前的index。不然移入事件时会选中当列所有的元素，而不是鼠标点中的那个元素。

方法二：

1.元素添加一个类名，绑定移入移出事件，并传递 $event 这个参数

2.添加一个active 的样式

3.在移入移出事件中，通过一下两行代码来添加或者删除 active 样式

$event.currentTarget.className = "indent active";
$event.currentTarget.className = "indent ";

补充：

：class的几种用法

// 添加单一类名
:class="{active:current===index}"
// 添加类名数组
:class="['tabs-item',index===tabsIndex?'active':'']"