在鼠标悬停时动态添加和删除类 - Vue.js

Question

I can successfully add a class on mouseover with Vue. But I want to remove the class when the mouse leaves the element. What is the idiomatic way of handling this in 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>

As you can see on mouseover I call the mouseOver function and this successfully adds the class to the element. But now when the users leaves the element the class remains. How can I have the class remove when the user leaves the element? Thanks for the help.

Answer 1

Listen for both mouseover and mouseout and set the class based on that.

 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>

Or just use 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>

Answer 2

A more scalable solution would be to use a directive:

 // Directives Vue.directive('add-class-hover', { bind(el, binding, vnode) { const { value="" } = binding; el.addEventListener('mouseenter',()=> { el.classList.add(value) }); el.addEventListener('mouseleave',()=> { el.classList.remove(value) }); }, unbind(el, binding, vnode) { el.removeEventListener('mouseenter'); el.removeEventListener('mouseleave') } }) new Vue({ el: "#app" })

 .hoverClass { color: red; font-weight: 700; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h1 v-add-class-hover="'hoverClass'"> Text </h1> </div>

Answer 3

将以下内容添加到要在悬停时设置动画的 div 中：

@mouseover="isHovering = item.id" @mouseout="isHovering = false" :class="isHovering == item.id ? 'slower animated pulse' : ''"

Answer 4

In case someone is looking for something that actually works with v-for , use this:

<div v-for="(item, index) in [1,2,3,4,5,6,7,8]" @mouseenter="state.hover=index" @mouseleave="state.hover=false">
  <p :class="{ 'yourClass': state.hover == index }">Hello World</p>
</div>

The above answers will trigger all of your elements inside a v-for loop at the same time.