vue鼠标移入事件

作者：寂寞味道发布日期:2026-05-18 浏览:99

// Vue鼠标移入事件示例代码

<template>
  <div>
    <!-- 使用 v-on 指令绑定 @mouseenter 事件 -->
    <div @mouseenter="handleMouseEnter" class="box">
      将鼠标移到这里
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 定义处理鼠标移入事件的函数
    handleMouseEnter() {
      alert('鼠标移入了这个区域');
    }
  }
};
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

解释说明：

@mouseenter：这是Vue中的事件修饰符，用于监听鼠标移入元素时触发的事件。当鼠标指针进入元素范围内时，会触发绑定的事件处理函数。
handleMouseEnter：这是一个自定义的方法，在鼠标移入元素时被调用，并弹出一个提示框显示“鼠标移入了这个区域”。
class="box"：为元素添加样式类，使其在页面上有明显的视觉效果，方便测试鼠标移入事件。

上一篇：vue 子组件调用父组件方法

下一篇：vue3 emit用法