鼠标悬停或悬停 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

我觉得悬停的上述逻辑是不正确的。它只是在鼠标悬停时反转。我使用了下面的代码。它似乎工作得很好。

 <div @mouseover="upHere = true" @mouseleave="upHere = false" >
  <h2> Something Something </h2>
  <some-component v-show="upHere"></some-component>
</div>

在 vue 实例上

data: {
  upHere: false
}

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