Vue 控制鼠标移入移出事件文字的隐藏和显示

https://www.cnblogs.com/lovebear123/p/12133695.html

1,要实现的效果就是文字A和文字B通过鼠标移入移出事件，使他们在界面上交替显示，就如同鼠标移入显示文字A，鼠标移出显示文字B.

2,这个功能主要用v-for循环，和数组循环实现。

首先我先建立一个数组，把框架搭建好。

 

 

      {{ arry.name }}
      {{ arry.text }}
    

 

然后现在的样式就是这样子的了，

 

 现在需要加入移入移出事件@mouseenter=“enters(index)” @mouseleave=“leaver(index)”，达到最初想要的效果

 

 

      {{ arry.name }}
      {{ arry.text }}
    

 

现在的样式是：

移入前：  移入后：