鼠标悬停或悬停 vue.js

Question

我想在 vue.js 中的元素上悬停时显示一个 div。但我似乎无法让它工作。

看起来 vue.js 中没有 hover 或 mouseover 事件。这是真的吗？

是否可以结合 jquery hover 和 vue 方法？

原文由 Anders Andersen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这里不需要方法。

HTML

 <div v-if="active">
 <h2>Hello World!</h2>
 </div>

 <div v-on:mouseover="active = !active">
 <h1>Hover me!</h1>
 </div>

JS

 new Vue({
 el: 'body',
 data: {
 active: false
 }
 })

原文由 NICO 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我认为你想要实现的是结合

@mouseover, @mouseout, @mouseenter and @mouseleave

所以最好的两个组合是

"@mouseover and @mouseout"

或者

"@mouseenter and @mouseleave"

而且我认为，最好使用 第二对，这样您就可以实现悬停效果并在其上调用功能。

 <div @mouseenter="activeHover = true" @mouseleave="activeHover = false" >
 <p v-if="activeHover"> This will be showed on hover </p>
 <p v-if ="!activeHover"> This will be showed in simple cases </p>
 </div>

在 vue 实例上

 data : {
 activeHover : false
 }

注意： 第一对 也会影响/移动子元素，但 第二对 只会影响您想要使用它的地方，而不是子元素。否则，使用 第一对 您会遇到一些故障/波动。因此，最好使用 第二对 以避免任何波动。

我希望，它也会对其他人有所帮助:)

原文由 Shamsail 发布，翻译遵循 CC BY-SA 4.0 许可协议