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

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

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

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

 

 <div
      v-for="(arry, index) in itemse"
      :key="arry.index"
      :value="arry.value"
      :label="arry.label"
    >
      {{ arry.name }}
      {{ arry.text }}
    

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

 

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

 

 <div
      v-for="(arry, index) in itemse"
      :key="arry.index"
      :value="arry.value"
      :label="arry.label"
      @mouseenter="enters(index)"
      @mouseleave="leaver(index)"
    >
      "switchNice[index].arry">{{ arry.name }}
      "switchNice[index].arrys">{{ arry.text }}
    

 

 

现在的样式是：

移入前：  移入后：

 

大功告成