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.js 的 v-for 指令循环多个 div，然后使用 v-show 指令来控制按钮的显示和隐藏。具体实现步骤如下：

1. 在 Vue.js 实例中声明一个数组，该数组包含多个对象，每个对象表示一个 div，其中包含一个属性用于控制按钮的显示和隐藏。例如：

data: {
  divList: [
    { id: 1, showBtn: false },
    { id: 2, showBtn: false },
    { id: 3, showBtn: false },
    // ...
  ]
}

2. 使用 v-for 指令循环该数组，并绑定每个 div 的 id 和鼠标移入移出事件。例如：

<div v-for="div in divList" :key="div.id" @mouseover="showBtn(div.id)" @mouseout="hideBtn(div.id)">
  <!-- div 的内容 -->
  <button v-show="div.showBtn">按钮</button>
</div>

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

methods: {
  showBtn(id) {
    this.divList.find(div => div.id === id).showBtn = true;
  },
  hideBtn(id) {
    this.divList.find(div => div.id === id).showBtn = false;
  }
}

这样就可以实现鼠标移入 div 显示按钮，移出 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` 变量的值来显示或隐藏按钮。