Javascript 在mouseover-Vue.js上动态添加和删除类

我可以使用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>

平安党
登录
注册
使用者
退出
从“./forms/SignUp”导入注册；
从“./表格/签名”导入签名；
导出默认值{
组成部分：{
报名，
签名
},
计算：{
伊斯洛格丁（）{
返回此。$store.getters.isLoggedIn
}
},
方法：{
注销：函数（）{
这是。$store.commit（“注销”）
此.$store.commit（“FLASH_消息”{
消息：“已成功注销”，
秀：没错，
styleClass：“错误”，
超时：4000
})
这是。$router.push（“/”）
},
mouseOver:function（）{
这是。$refs.sign_up。$vnode.elm.classList.add（“悬停”）
}
}
}

---

正如您在mouseover上看到的，我调用了mouseover函数，这成功地将类添加到元素中。但是现在，当用户离开元素时，类仍然存在。当用户离开元素时，如何让类移除？感谢您的帮助。

请同时收听

mouseover

和

mouseout

，并根据这两个选项设置类

console.clear（）
新Vue({
el:“应用程序”，
数据：{
isHovering:错
}
})

。悬停{
颜色：红色
}

{{Ishover？{Woot！Hover:“Hover over me”}

更具可扩展性的解决方案是使用指令：

//指令
Vue.指令（'add-class-hover'{
bind（el，binding，vnode）{
const{value=”“}=绑定；
el.addEventListener（'mouseenter'，（）=>{
el.classList.add（值）
});
el.addEventListener（'mouseleave'，（）=>{
el.classList.remove（值）
});
},
解除绑定（el、绑定、vnode）{
el.removeEventListener（“鼠标器”）；
el.removeEventListener（'mouseleave'））
}
})
新Vue({
el:“应用程序”
})

.hoverClass{
颜色：红色；
字号：700；
}

正文

但请记住CSS OP中有一个

：hover

。这完全是矫枉过正。所以

。注册：悬停{color:red；}

会给你同样的结果更清晰。@BillCriswell是的。。。那太有道理了：）是的，那是有道理的。我只是想探索如何在Vue中做这样的事情。但是，是的，这可以做得容易得多。另一个证明CSS是多么强大的这些天！谢谢你这个好的解决方案。对于unbind，remove事件侦听器需要一个侦听器作为第二个参数：最后，我的解决方案是在unbind处再次调用该方法：``unbind（el，binding，vnode）{el.removeEventListener（'mouseenter'，（）=>{el.classList.add（value）}）；el.removeEventListener（'mouseleave'，（）=>{el.classList.remove（value）}）}``也许这仍然不是最好的，因为它仍然是一个匿名函数。请看：在stackovervlow上看到不同类型的解决方案很好，但是从我所学的内容来看，像这样混合使用vuejs和dom操作是不好的做法。由于vuejs拥有自己的dom副本，这意味着您可能会遇到此类解决方案的问题。