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"
    >
      <label>{{ arry.name }}</label>
      <label>{{ arry.text }}</label>
    </div>

<script>
export default {
  data() {
    return {
      itemse: [
        { index: 1, name: "糖果", text: "阿尔卑斯" },
        { index: 2, name: "水果", text: "苹果" }
      ]
    };
  },
  methods: {}
};
</script>

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

 

 现在需要加入移入移出事件@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)"
    >
      <label v-show="switchNice[index].arry">{{ arry.name }}</label>
      <label v-show="switchNice[index].arrys">{{ arry.text }}</label>
    </div>

 

 

<script>
export default {
  data() {
    return {
      itemse: [
        { index: 1, name: "糖果", text: "阿尔卑斯" },
        { index: 2, name: "水果", text: "苹果" }
      ],
      switchNice: [
        //这绑定了上面V-show,
        {
          arry: true,
          arrys: false
        },
        {
          arry: true,
          arrys: false
        },
        {
          arry: true,
          arrys: false
        }
      ]
    };
  },
  methods: {
    enters(index) {
      this.switchNice[index].arry = false; //这里的先后顺序如果写反了 就会一直闪，这是根据上面那个思路写的，
      this.switchNice[index].arrys = true; //鼠标移入 首先是A先消失，然后B再出现的，写反就会疯狂闪。
    },
    leaver(index) {
      this.switchNice[index].arrys = false; //移出时也一样，先B消失 再出现A。
      this.switchNice[index].arry = true;
    }
  }
};
</script>

现在的样式是：

移入前：  移入后：

 

大功告成