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`只会在鼠标进入元素时触发一次。