Vue.js如何实现鼠标hover时隐藏div？现有代码hover首元素异常求解

问题原因 #

你现在遇到的效果异常核心有三个原因：

1. 使用了mouseover和mouseout事件，这两个事件存在冒泡特性，鼠标移入父元素内部的子元素时会反复触发事件，导致元素频繁切换显示隐藏，出现效果异常。
2. v-for未绑定key属性，不符合Vue列表渲染规范，也可能引发渲染异常。
3. 当前逻辑是hover时显示div，和你要的hover隐藏需求相反。

修复方案 #

JS代码无需调整，保持原样即可： #

new Vue({
  el: '#mouse',
  data: {
    showByIndex: null
  }, 
  methods: {

  }
})

调整后的HTML代码： #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="mouse">
  <!-- 替换鼠标事件，补充key属性 -->
  <div class="parent" v-for="i in 1" :key="i" @mouseenter="showByIndex = i" @mouseleave="showByIndex = null">
    <!-- 要hover时隐藏的div，调整v-show条件为不等于当前hover索引 -->
    <div class="child-one" v-show="showByIndex !== i">
      Some dummy text
    </div>
    <div class="child-two" v-show="showByIndex === i">
      Show me only on hover on "div.parent" element
    </div>
  </div>
</div>

修改说明 #

• 鼠标事件替换为mouseenter和mouseleave，仅在鼠标进出父元素本身时触发，不会被子元素冒泡影响，彻底解决闪动问题
• 给v-for加上key属性，符合Vue渲染规范
• 若需要hover时隐藏其他div，只需给对应div的v-show条件设置为showByIndex !== i即可，可根据实际需要调整显示隐藏的判断逻辑

内容的提问来源于stack exchange，提问作者T dhanunjay