如何在Vuejs中鼠标悬停时隐藏div元素？

Question

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="mouse"> <div class="parent" v-for="i in 1" @mouseover="showByIndex = i" @mouseout="showByIndex = null"> <div class="child-one"> Some dummy text </div> <div class="child-two" v-show="showByIndex === i"> Show me only on hover on "div.parent" element </div> </div> </div>

工作示例：- https://codepen.io/dhanunjayt/pen/XWgyqXW

使用上面的代码，我可以在 div 元素悬停时显示文本。 但小问题是悬停第一个元素不应该反映。

Answer 1

喜欢以下片段？

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

 .parent { padding: 2em; background: violet; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="mouse"> <div class="parent" v-for="i in 1" @mouseover="showByIndex = i" @mouseout="showByIndex = null"> <div class="child-one" v-show="showByIndex === null"> Some dummy text </div> <div class="child-two" v-show="showByIndex === i"> Show me only on hover on "div.parent" element </div> </div> </div>