我可以使用 Vue 成功地在鼠标悬停时添加一个类。但我想在鼠标离开元素时删除该类。在 Vue 中处理这个问题的惯用方法是什么？
<template>
<div id="navigation">
<div class="nav-container">
<nav>
<router-link to="/" class="home">Ping Party</router-link>
<div class="navigation-actions">
<router-link to="/sign_in" v-if="!isLoggedIn" class="sign_in">Sign In</router-link>
<router-link to="/sign_up" v-if="!isLoggedIn" @mouseover.native="mouseOver" class="sign_up" ref="sign_up">Sign Up</router-link>
<router-link to="/users" v-if="isLoggedIn" class="users">Users</router-link>
<v-btn :click.prevent="signOut()" v-if="isLoggedIn">Sign Out</v-btn>
</div>
</nav>
</div>
</div>
</template>
<script>
import SignUp from "../forms/SignUp";
import SignIn from "../forms/SignIn";
export default {
components: {
SignUp,
SignIn
},
computed: {
isLoggedIn () {
return this.$store.getters.isLoggedIn
}
},
methods: {
signOut: function() {
this.$store.commit("LOGOUT")
this.$store.commit("FLASH_MESSAGE", {
message: "Signed Out Successfully",
show: true,
styleClass: "error",
timeOut: 4000
})
this.$router.push('/')
},
mouseOver: function() {
this.$refs.sign_up.$vnode.elm.classList.add("hovered")
}
}
}
</script>
正如您在 mouseover 上看到的，我调用了 mouseOver 函数，这成功地将类添加到元素中。但现在，当用户离开该元素时，该类仍然存在。当用户离开元素时，如何删除该类？谢谢您的帮助。
听两个mouseover and mouseout并据此设置班级。
console.clear()
new Vue({
el: "#app",
data:{
isHovering: false
}
})
.hovering{
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<h1 @mouseover="isHovering = true"
@mouseout="isHovering = false"
:class="{hovering: isHovering}">
{{ isHovering ? "Woot! Hovered" : "Hover over me" }}
</h1>
</div>
或者只使用CSS。
console.clear()
new Vue({
el: "#app",
data:{
isHovering: false
}
})
h1:hover{
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<h1 @mouseover="isHovering = true"
@mouseout="isHovering = false" >
{{ isHovering ? "Woot! Hovered" : "Hover over me" }}
</h1>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
