vue 鼠标到这个div才显示按钮

您可以使用Vue的指令`v-show`和`v-on`来实现这个功能。具体步骤如下：

1. 在HTML中添加一个`div`和一个按钮，按钮的`v-show`属性为`showBtn`，初始值为`false`，即不显示按钮。

<div v-on:mouseover="showBtn = true" v-on:mouseleave="showBtn = false">
  鼠标移到这个div上会显示按钮
  <button v-show="showBtn">按钮</button>
</div>

2. 在Vue实例中添加一个`data`属性`showBtn`，初始值为`false`。

new Vue({
  el: '#app',
  data: {
    showBtn: false
  }
})

这样，当鼠标移到`div`上时，`showBtn`属性会变为`true`，按钮就会显示出来；当鼠标离开`div`时，`showBtn`属性又会变为`false`，按钮就又会隐藏起来。

相关问题

vue 循环多个div鼠标到这个div显示这个div的按钮

您可以使用Vue的指令`v-for`、`v-show`和`v-on`来实现循环多个`div`并在鼠标移到某个`div`上时显示该`div`的按钮。具体步骤如下：

1. 在HTML中使用`v-for`循环多个`div`，并为每个`div`添加一个按钮，按钮的`v-show`属性为`showBtn[index]`，初始值为`false`，即不显示按钮。`index`是当前`div`的下标。

<div v-for="(item, index) in items" v-on:mouseover="showBtn[index] = true" v-on:mouseleave="showBtn[index] = false">
  {{ item.name }}
  <button v-show="showBtn[index]">显示按钮</button>
</div>

2. 在Vue实例中添加一个`data`属性`items`，用于保存要循环的数据，以及一个`data`属性`showBtn`，初始值为一个长度等于`items`长度的数组，数组中每个元素都为`false`。

new Vue({
  el: '#app',
  data: {
    items: [
      { name: '第一个div' },
      { name: '第二个div' },
      { name: '第三个div' },
      { name: '第四个div' }
    ],
    showBtn: []
  },
  created () {
    this.showBtn = new Array(this.items.length).fill(false)
  }
})

这样，当鼠标移到某个`div`上时，该`div`对应的`showBtn`元素会变为`true`，该`div`的按钮就会显示出来；当鼠标离开`div`时，`showBtn`元素又会变为`false`，该`div`的按钮就又会隐藏起来。

vue鼠标放到某个区域显示按钮

您可以使用Vue的指令和事件监听来实现鼠标放到某个区域显示按钮的效果。具体实现步骤如下：

1. 在需要显示按钮的区域上添加一个指令，例如 `v-hover`。
2. 在指令中监听 `mouseenter` 和 `mouseleave` 事件，并根据事件触发的结果来显示或隐藏按钮。
3. 在需要显示的按钮上添加一个 `v-show` 指令，并将其绑定到一个变量上，根据需要显示或隐藏按钮。

下面是一个示例代码：

<template>
  <div v-hover>
    <p>鼠标移入此区域将会显示按钮</p>
    <button v-show="showButton">点击按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showButton: false
    };
  },
  directives: {
    hover: {
      bind(el) {
        el.addEventListener('mouseenter', () => {
          this.showButton = true;
        });
        el.addEventListener('mouseleave', () => {
          this.showButton = false;
        });
      }
    }
  }
};
</script>

在上面的示例代码中，我们创建了一个 `v-hover` 指令，当鼠标移入指令所在的区域时，会触发 `mouseenter` 事件，此时会将 `showButton` 变量设置为 `true`，从而显示按钮；当鼠标离开指令所在的区域时，会触发 `mouseleave` 事件，此时会将 `showButton` 变量设置为 `false`，从而隐藏按钮。在按钮上使用 `v-show` 指令来根据 `showButton` 变量的值来显示或隐藏按钮。