Dynamically add and remove classes on mouseover - 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?

<

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
}

  

    {{ isHovering ? "Woot! Hovered" : "Hover over me" }}
  

Or just use CSS.

console.clear()

new Vue({
  el: "#app",
  data:{
    isHovering: false
  }
})

h1:hover{
  color: red
}

  

    {{ isHovering ? "Woot! Hovered" : "Hover over me" }}