vue实现鼠标悬浮时显示对应按钮

要实现鼠标悬浮时显示对应按钮，可以使用Vue的指令和动态样式绑定。

首先，创建一个Vue实例，并在data中定义一个变量来保存当前悬浮的按钮索引：

new Vue({
  el: '#app',
  data: {
    hoverButtonIndex: -1
  },
  methods: {
    setHoverButton(index) {
      this.hoverButtonIndex = index;
    }
  }
});

然后，在HTML中使用v-bind指令将当前按钮索引和hoverButtonIndex绑定起来，并使用v-show指令控制按钮的显示/隐藏：

<div id="app">
  <button v-for="(button, index) in buttons" :key="index" :class="{ hover: hoverButtonIndex === index }" @mouseover="setHoverButton(index)" @mouseleave="setHoverButton(-1)">
    {{ button }}
  </button>
</div>

在上面的代码中，我们使用v-for指令循环渲染按钮，并给每个按钮绑定了mouseover和mouseleave事件。当鼠标悬浮在按钮上时，会调用setHoverButton方法，将当前按钮索引赋值给hoverButtonIndex，从而触发按钮的显示。当鼠标离开按钮时，会将hoverButtonIndex重置为-1，从而触发按钮的隐藏。

最后，可以通过CSS来定义按钮的样式，例如设置hover类的背景色为红色：

button.hover {
  background-color: red;
}

这样，当鼠标悬浮在按钮上时，按钮的背景色会变为红色。

请注意，上述代码中的buttons变量是一个包含按钮文本的数组，你可以根据自己的需求来定义和修改它