最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片，大致实现出来的效果就是这样：
这个在jQuery中是个很简单的事，但是在vue中我还是第一次实现。
HTML代码如下
css代码如下
其实就是很简单的通过position:absolute进行了布局，现在选中样式的图片已经全部覆盖到了没有选中样式图片之上了。
接下来就需要一个变量控制他们的显隐。这个变量应该是一个和每个分类一一对应的，那这个变量就不应该是一个简单的布尔值，而是一个数字，和每个分类图片对应。
我定义这个变量叫做active，在data中声明
再定义一个方法控制active变量的变化
方法中的index参数就是鼠标悬浮时传入的值
修改html代码如下
只有在当前index和active相等时，才会显示已选中分类的图片。
而鼠标离开时，传入一个没有与之对应的0，这样就没有显示了。
本文已被整理到了《》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题进行学习。
原文链接：https://www.f2er.com/vue/39241.html