我可以用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函数,这成功地将类添加到元素中.但现在,当用户离开元素时,类仍然存在.当用户离开元素时,如何让类移除?谢谢你的帮助.

推荐答案

mouseovermouseout,并以此为基础设置课程.

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>

Vue.js相关问答推荐

为什么元素会从Vue 3中的TransitionGroup左上角出现?

使用 nuxt.js 组件自动导入对性能不利吗?

如何在 Vuetify v-data-table 上对齐标题

使用 jquery-chosen 插件更新 vuejs 模型值

Vue + Webpack 构建显示空白页面

在组件上的 Vue 3 中获取 URL 查询参数

如何在 vue.js 中删除类

在没有组件的vue js中拖放

VueJS + VueRouter:有条件地禁用路由

使用 Vee-Validate 在提交时验证子输入组件

Vuejs模板继承

如何在 vuetify 中将工具提示添加到数据表标题?

在找不到图像源时设置替代图像

如何从组件内的单点捕获 vuejs 错误

使用 puppeteer 生成 PDF 而不保存

如何从浏览器的源中删除 webpack://

Vue中的嵌套循环

返回 VueJS 方法的Native Code消息

在 Vuejs 中全局导入 Axios 方法

为什么不能在 vue 模板中使用窗口?