마우스오버 시 클래스를 동적으로 추가 및 제거 - Vue.js

마우스오버 시 클래스를 동적으로 추가 및 제거 - 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>

마우스오버에서 볼 수 있듯이 나는 mouseOver 기능을 호출하고 이것은 성공적으로 클래스를 요소에 추가한다.그러나 이제 사용자가 요소를 떠나도 클래스는 그대로 남아 있다.사용자가 요소에서 나갈 때 클래스를 제거하려면 어떻게 해야 하는가?도와 주셔서 감사해요.

양쪽 다 들어라mouseover그리고mouseout그리고 그것을 바탕으로 수업을 설정한다.

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>

보다 확장 가능한 솔루션은 다음과 같은 지침을 사용하는 것이다.

// 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>

호버에서 애니메이션을 만들 Div에 다음을 추가하십시오.

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

참조URL: https://stackoverflow.com/questions/48892189/dynamically-add-and-remove-classes-on-mouseover-vue-js