Answers:
这是我认为您要的工作示例。
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;
}
}
});v-on:mouseover="mouseOver"但没有提及语法在哪个版本的vue中更改了
@mouseover:mouseover
我觉得上述悬停逻辑不正确。当鼠标悬停时，它只是反过来。我用下面的代码。它似乎工作正常。
<div @mouseover="upHere = true" @mouseleave="upHere = false" >
<h2> Something Something </h2>
<some-component v-show="upHere"></some-component>
</div>在vue实例上
data : {
upHere : false
}希望有帮助
data: () => ({ upHere: false })
这里不需要方法。
的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
}
})要显示子元素或同级元素，只能使用CSS。如果使用:hover组合程序之前（+，~，>，space）。然后，样式不适用于悬停的元素。
的HTML
<body>
<div class="trigger">
Hover here.
</div>
<div class="hidden">
This message shows up.
</div>
</body>的CSS
.hidden { display: none; }
.trigger:hover + .hidden { display: inline; }使用mouseover和mouseleave事件，您可以定义一个切换功能，该功能实现此逻辑并对渲染中的值做出反应。
检查此示例：
var vm = new Vue({
el: '#app',
data: {btn: 'primary'}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id='app'>
<button
@mouseover="btn='warning'"
@mouseleave="btn='primary'"
:class='"btn btn-block btn-"+btn'>
{{ btn }}
</button>
</div>@mouseover="btn-color='btn-warning' @mouseleave="btn-color='btn-primary' :class="btn btn-block { btn-color}"
可以严格在组件的模板内切换悬停类，但是，出于明显的原因，这不是实际的解决方案。另一方面，对于原型制作，我发现不必在脚本中定义数据属性或事件处理程序很有用。
这是如何使用Vuetify尝试图标颜色的示例。
new Vue({
el: '#app'
})<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-toolbar color="black" dark>
<v-toolbar-items>
<v-btn icon>
<v-icon @mouseenter="e => e.target.classList.toggle('pink--text')" @mouseleave="e => e.target.classList.toggle('pink--text')">delete</v-icon>
</v-btn>
<v-btn icon>
<v-icon @mouseenter="e => e.target.classList.toggle('blue--text')" @mouseleave="e => e.target.classList.toggle('blue--text')">launch</v-icon>
</v-btn>
<v-btn icon>
<v-icon @mouseenter="e => e.target.classList.toggle('green--text')" @mouseleave="e => e.target.classList.toggle('green--text')">check</v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar>
</v-app>
</div>有一个正确的可运行的JSFiddle：http : //jsfiddle.net/1cekfnqw/176/
<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>虽然我会使用新的composition api进行更新。
<template>
<div @mouseenter="hovering = true" @mouseleave="hovering = false">
{{ hovering }}
</div>
</template>
<script lang="ts">
import { ref } from '@vue/compsosition-api'
export default {
setup() {
const hoverRef = ref(false)
return { hovering }
}
})
</script>创建useHover函数将允许您在任何组件中重用。
export function useHover(target: Ref<HTMLElement | null>) {
const hovering = ref(false)
const enterHandler = () => (hovering.value = true)
const leaveHandler = () => (hovering.value = false)
onMounted(() => {
if (!target.value) return
target.value.addEventListener('mouseenter', enterHandler)
target.value.addEventListener('mouseleave', leaveHandler)
})
onUnmounted(() => {
if (!target.value) return
target.value.removeEventListener('mouseenter', enterHandler)
target.value.removeEventListener('mouseleave', leaveHandler)
})
return hovering
}这是一个在Vue组件内调用函数的简单示例。
<template>
<div ref="hoverRef">
{{ hovering }}
</div>
</template>
<script lang="ts">
import { ref } from '@vue/compsosition-api'
import { useHover } from './useHover'
export default {
setup() {
const hoverRef = ref(null)
const hovering = useHover(hoverRef)
return { hovering, hoverRef }
}
})
</script>您还可以使用诸如之类的库，@vuehooks/core其中包含许多有用的功能，包括useHover。
这是MouseOver和MouseOut的非常简单的示例：
<div id="app">
<div :style = "styleobj" @mouseover = "changebgcolor" @mouseout = "originalcolor">
</div>
</div>
new Vue({
el:"#app",
data:{
styleobj : {
width:"100px",
height:"100px",
backgroundColor:"red"
}
},
methods:{
changebgcolor : function() {
this.styleobj.backgroundColor = "green";
},
originalcolor : function() {
this.styleobj.backgroundColor = "red";
}
}
});如果您不满意这段代码的外观，请查看vue-mouseover软件包：
<div
@mouseover="isMouseover = true"
@mouseleave="isMouseover = false"
/>vue-mouseover提供了一个v-mouseover指令，当光标进入或离开该指令所附加的HTML元素时，该指令会自动更新指定的数据上下文属性。
默认情况下，下一个示例isMouseover属性将是true光标在HTML元素上时的属性，false否则：
<div v-mouseover="isMouseover" />同样，默认情况下，当附加到元素时isMouseover会默认分配初始值，因此在第一个/ 之前不会保持未分配状态v-mouseoverdivmouseentermouseleave事件。
您可以通过指令指定自定义值v-mouseover-value：
<div
v-mouseover="isMouseover"
v-mouseover-value="customMouseenterValue"/>要么
<div
v-mouseover="isMouseover"
v-mouseover-value="{
mouseenter: customMouseenterValue,
mouseleave: customMouseleaveValue
}"
/>可以在安装过程中通过options对象将自定义默认值传递给软件包。