vue3鼠标悬停事件

Vue3 中的鼠标悬停事件通常通过 `v-on.mouseenter` 和 `v-on.mouseleave` 绑定到元素上实现。这两个指令用于监听鼠标进入和离开某个元素的事件。例如：

<template>
  <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    鼠标悬停这里
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseEnter() {
      console.log('鼠标进入了元素');
    },
    
    handleMouseLeave() {
      console.log('鼠标离开了元素');
    }
  }
}
</script>

在这个例子中，当鼠标指针移入 `<div>` 元素时，`handleMouseEnter` 函数会被调用，鼠标离开时则会调用 `handleMouseLeave`。记住，在 Vue3 中使用的是点解操作符 `.on` 替代了模板绑定，比如 `v-on:`。

相关问题

vue 鼠标悬停事件

Vue中的鼠标悬停事件可以通过`v-on`指令或`@`简写来绑定。常用的鼠标悬停事件是`mouseover`和`mouseenter`。

<template>
  <div>
    <p v-on:mouseover="handleMouseOver">鼠标悬停触发事件</p>
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseOver() {
      // 处理鼠标悬停事件的逻辑
      console.log("鼠标悬停触发了事件");
    },
  },
};
</script>

在上述代码中，当鼠标悬停在`<p>`元素上时，会触发`handleMouseOver`方法。

如果你想使用`@`简写来绑定事件，可以将`v-on:mouseover`替换为`@mouseover`。

<p @mouseover="handleMouseOver">鼠标悬停触发事件</p>

除了`mouseover`，你还可以使用其他鼠标事件，如`mouseenter`，其区别在于`mouseover`会在鼠标经过元素及其子元素时触发，而`mouseenter`只会在鼠标进入元素时触发一次。

vue3鼠标悬停替换图标

在 Vue3 中，你可以利用 v-bind:class 或者 :style 标签以及计算属性来实现鼠标悬停时替换图标的功能。这里是一个简单的例子：

<template>
  <button @mouseenter="hoverState = true" @mouseleave="hoverState = false">
    <span v-if="!hoverState">{{ iconOne }}</span>
    <span v-if="hoverState">{{ iconTwo }}</span>
    <img :src="hoverIconSrc" alt="" v-if="hoverState" style="display:none;"> <!-- 隐藏默认图标 -->
  </button>
</template>

<script>
export default {
  data() {
    return {
      hoverState: false,
      iconOne: 'default_icon_1',
      iconTwo: 'hover_icon_2',
      hoverIconSrc: 'hover_icon_url', // 悬停时显示的图片URL
    };
  },
};
</script>

在这个例子中，当鼠标悬停在按钮上时，`hoverState` 变为 `true`，此时会展示 `iconTwo` 和隐藏默认图标，如果移开鼠标则 `hoverState` 为 `false`，再次显示 `iconOne`。