将鼠标悬停在 vue 上或悬停.js

javascript vue.js hover mouseover

2022-08-30 02:37:47

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

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

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

答案 1

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

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

在 vue 实例上

data : {
    upHere : false
}

希望有所帮助

答案 2

这是我认为您所要求的工作示例。

http://jsfiddle.net/1cekfnqw/3017/

 <div id="demo">
        <div v-show="active">Show</div>
        <div @mouseover="mouseOver">Hover over me!</div>
    </div>

var demo = new Vue({
    el: '#demo',
    data: {
        active: false
    },
    methods: {
        mouseOver: function(){
            this.active = !this.active;   
        }
    }
});