在鼠标悬停时动态添加和删除类 - Vue.js [英] Dynamically add and remove classes on mouseover - Vue.js
本文介绍了在鼠标悬停时动态添加和删除类 - Vue.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我可以使用 Vue 在鼠标悬停时成功添加一个类.但是我想在鼠标离开元素时删除该类.在 Vue 中处理这个问题的惯用方法是什么?
<div id="导航"><div class="nav-container"><导航><router-link to="/" class="home">Ping Party</router-link><div class="navigation-actions"><router-link to="/sign_in" v-if="!isLoggedIn" class="sign_in">登录</router-link><router-link to="/sign_up" v-if="!isLoggedIn" @mouseover.native="mouseOver" class="sign_up" ref="sign_up">注册</router-link><router-link to="/users" v-if="isLoggedIn" class="users">用户</router-link><v-btn :click.prevent="signOut()" v-if="isLoggedIn">退出</v-btn></nav>
</模板><脚本>从../forms/SignUp"导入注册；从../forms/SignIn"导入登录；导出默认{成分: {报名，登入},计算:{isLoggedIn(){返回 this.$store.getters.isLoggedIn}},方法: {退出:函数(){this.$store.commit("注销")this.$store.commit("FLASH_MESSAGE", {消息:退出成功"，显示:真实，样式类:错误"，超时:4000})this.$router.push('/')},鼠标悬停:函数(){this.$refs.sign_up.$vnode.elm.classList.add("悬停")}}}
正如你在 mouseover 上看到的，我调用了 mouseOver 函数，这成功地将类添加到元素中.但是现在当用户离开元素时，类仍然存在.当用户离开元素时，如何删除该类?感谢您的帮助.
解决方案
同时监听 mouseover 和 mouseout 并在此基础上设置类.
console.clear()新的 Vue({el: "#app",数据:{isHovering: 假}}).hovering{红色}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script><div id="应用程序"><h1 @mouseover="isHovering = true"@mouseout="isHovering = false":class="{悬停: isHovering}">{{ isHovering ?哇！悬停":悬停在我身上"}}