在鼠标悬停时动态添加和删除类 - Vue.js [英] Dynamically add and remove classes on mouseover - 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 ?哇!悬停":悬停在我身上"}}