vue实现鼠标悬浮时显示按钮否则按钮隐藏

可以使用Vue的指令（directive）来实现这个功能。首先，在Vue的实例中创建一个自定义指令，然后将其绑定到按钮元素上。在这个自定义指令中，我们可以监听鼠标悬浮事件，并根据事件的触发来控制按钮的显示和隐藏。

下面是一个简单的示例：

HTML代码：

<div id="app">
  <button v-show-btn>按钮</button>
</div>

Vue代码：

Vue.directive('show-btn', {
  bind: function (el) {
    el.style.display = 'none'; // 隐藏按钮
    el.addEventListener('mouseenter', function () {
      el.style.display = 'block'; // 鼠标进入时显示按钮
    });
    el.addEventListener('mouseleave', function () {
      el.style.display = 'none'; // 鼠标离开时隐藏按钮
    });
  }
});

new Vue({
  el: '#app'
});

在这个示例中，我们创建了一个名为show-btn的自定义指令，并在按钮元素上使用v-show-btn来绑定这个指令。在指令的bind函数中，我们给按钮元素添加了mouseenter和mouseleave事件的监听器，当鼠标进入按钮时，按钮显示，当鼠标离开按钮时，按钮隐藏。

你可以将上述代码复制到一个HTML文件中运行，鼠标悬浮在按钮上时，按钮会显示出来，当鼠标离开按钮时，按钮会隐藏起来