Vue.js 中使用鼠标悬停实现动态添加和移除类

2024-03-05 22:25:51

在 Vue.js 中使用鼠标悬停动态添加和移除类

在 Vue.js 中，实现鼠标悬停时动态添加和移除类非常简单，可以通过使用 v-on 指令监听 mouseenter 和 mouseleave 事件来实现。

添加类

在 mouseenter 事件中，使用 $event.target 获取触发事件的元素，然后使用 classList.add() 方法向该元素添加类。

代码示例：

<template>
  <div @mouseenter="mouseEnter">...</div>
</template>

<script>
  export default {
    methods: {
      mouseEnter(event) {
        event.target.classList.add('hovered');
      }
    }
  }
</script>

移除类

在 mouseleave 事件中，同样使用 $event.target 获取触发事件的元素，然后使用 classList.remove() 方法从该元素中移除类。

代码示例：

<template>
  <div @mouseleave="mouseLeave">...</div>
</template>

<script>
  export default {
    methods: {
      mouseLeave(event) {
        event.target.classList.remove('hovered');
      }
    }
  }
</script>

结合使用

通过结合使用 mouseenter 和 mouseleave 事件，可以实现鼠标悬停时添加类，鼠标离开时移除类的效果。

代码示例：

<template>
  <div @mouseenter="mouseEnter" @mouseleave="mouseLeave">...</div>
</template>

<script>
  export default {
    methods: {
      mouseEnter(event) {
        event.target.classList.add('hovered');
      },
      mouseLeave(event) {
        event.target.classList.remove('hovered');
      }
    }
  }
</script>