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

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

<template>
 <div>
   <div class='hello' v-for="(arry , index) in itemse" :key="arry.index" :value="arry.value" :label="arry.label">
        <div>{{arry.name}}</div>
        <div>{{arry.text}}</div>
      </div>
 </div>
</template>
<script>
export default {
     data(){
         return{
         itemse:[
         {index:1,name:'苹果',text:'可乐',},
         {index:2,name:'香蕉',text:'雪碧',},
         {index:3,name:'草莓',text:'橙子',},
         ]
         }
     }
}
</script>
<style scoped>
.hello{
     display: inline-block;
     padding: 0px 10px;
}
</style>

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

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

<template>
  <div>
    <div
      class="hello"
      v-for="(arry , index) in itemse"
      :key="arry.index"
      :value="arry.value"
      :label="arry.label"
      @mouseenter="enters(index)"
      @mouseleave="leaver(index)"
    >
      <div v-show="switchNice[index].arry">{{arry.name}}</div>
      <div v-show="switchNice[index].arrys">{{arry.text}}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemse: [
        { index: 1, name: "苹果", text: "可乐" },
        { index: 2, name: "香蕉", text: "雪碧" },
        { index: 3, 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>
<style scoped>
.hello {
  display: inline-block;
  padding: 0px 10px;
}
</style>

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

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