Vue v-show控制鼠标移入移出事件的显示与隐藏 记录一下

1.什么是鼠标移入移出事件 我个人理解为鼠标移入或移出某个DIV块时所发生变化的事件,
有点像hover事件。可能有点理解不了
2.可以这么理解，假设div块的内容是123，那么当鼠标经过这个div块时，里面的123内容会变成456，当鼠标
离开时里面的内容又会变成123. 理解的比较土。
3.这次用V-for循环出多个数组并对每一个数组进行显示与隐藏。
4.首先，还是先写一个循环数组。

写好后，就像下图一样，理一下思路，假定苹果这一行为A，可乐这一行为B ，现在只需要显示一行，就是A显示的同时B隐藏，B显示的同时A隐藏，那么就可以用到鼠标移入移出事件了，页面初始化时A显示B隐藏，当鼠标移入时A隐藏B显示，鼠标移出时又变回原来的样子A显示B隐藏。

5. @mouseenter=“enters(index)” @mouseleave=“leaver(index)” 前者为移入时的，后者为移出时的
6. 这里根据上面的循环例子，再贴一个。

样式就不写了，放个效果图吧，样式可以看我上一篇文章 然后结合使用。

最后，有不足之处望指出，个人理解