mouseenter 和 mouseleave vue使用

mouseenter 和 mouseleave 是 JavaScript 原生的鼠标事件，用于在鼠标进入或离开元素时触发相应的事件处理函数。在 Vue.js 中，你可以使用 v-on 指令来绑定这两个事件。

具体实现步骤如下：

1. 在需要绑定事件的元素上添加相应的指令，例如：

<div v-on:mouseenter="showBtn" v-on:mouseleave="hideBtn">
  <!-- 元素的内容 -->
  <button v-show="isBtnShown">按钮</button>
</div>

其中，v-on:mouseenter 指令绑定了 showBtn 方法，v-on:mouseleave 指令绑定了 hideBtn 方法。

2. 在 Vue.js 实例中声明 showBtn 和 hideBtn 方法，用于控制按钮的显示和隐藏。例如：

data: {
  isBtnShown: false
},
methods: {
  showBtn() {
    this.isBtnShown = true;
  },
  hideBtn() {
    this.isBtnShown = false;
  }
}

其中，isBtnShown 是一个布尔类型的数据，用于控制按钮的显示和隐藏。

这样就可以在鼠标进入元素时显示按钮，在鼠标离开元素时隐藏按钮了。需要注意的是，mouseenter 和 mouseleave 与 mouseover 和 mouseout 类似，但是它们的区别在于事件冒泡的方式不同。如果你需要更精细的控制，可以尝试使用 mouseover 和 mouseout 事件。