vue中我要鼠标移入一个按钮时，一个隐藏的div显示出来

你可以使用Vue的事件绑定和条件渲染来实现这个功能。

首先，在按钮上绑定鼠标移入事件：

<button @mouseover="showDiv">Hover Me</button>

然后在Vue的data中定义一个变量来控制隐藏的div是否显示：

data() {
  return {
    isDivVisible: false
  }
}

接着，在methods中定义showDiv方法，该方法将isDivVisible变量设置为true：

methods: {
  showDiv() {
    this.isDivVisible = true
  }
}

最后，在HTML中根据isDivVisible的值来决定是否显示隐藏的div：

<div v-if="isDivVisible">Hidden Div</div>

相关问题

vue循环出来的div div里面有删除按钮 鼠标移入移出改变其中一个按钮的背景颜色

您可以使用Vue的事件绑定和条件渲染来实现鼠标移入移出改变按钮背景颜色的效果。具体做法是：

1. 给删除按钮绑定mouseenter和mouseleave事件，分别触发对应的处理方法。
2. 在数据模型中添加一个属性用来表示当前鼠标是否在按钮上。
3. 在模板中使用v-bind:class指令来动态绑定按钮的class，根据鼠标是否在按钮上来决定是否添加特定的class来改变背景颜色。

示例代码如下：

<template>
  <div v-for="(item, index) in list" :key="index">
    <div>
      {{item.text}}
      <button class="delete-button"
              @mouseenter="setButtonHover(true, index)"
              @mouseleave="setButtonHover(false, index)"
              @click="deleteItem(index)">
        删除
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {text: 'item1'},
        {text: 'item2'},
        {text: 'item3'},
      ],
      buttonHover: [],
    }
  },
  methods: {
    setButtonHover(hover, index) {
      this.$set(this.buttonHover, index, hover);
    },
    deleteItem(index) {
      this.list.splice(index, 1);
      this.$delete(this.buttonHover, index);
    },
  },
}
</script>

<style>
.delete-button:hover {
  background-color: gray;
}

.delete-button.hover {
  background-color: green;
}
</style>

在模板中使用v-bind:class来绑定按钮的class，根据buttonHover数组中的值来判断是否添加.hover类。用this.$set和this.$delete来更新数组中某个元素的值。使用的是Vue的响应式设置。注意删除元素时，也要删除按钮hover的状态。

vue循环出来的div div里面右侧有删除按钮 鼠标移入移出改变其中一个删除按钮的背景颜色

要实现这个功能可以使用Vue的指令v-bind:class和v-on:mouseenter以及v-on:mouseleave。

首先，在循环中给每个删除按钮添加唯一的id或者索引值，在template中通过v-bind:class绑定一个类名，该类名默认不显示背景颜色。

然后，在该删除按钮上绑定鼠标移入和移出事件v-on:mouseenter和v-on:mouseleave，在事件方法中修改该删除按钮的类名，使其显示背景颜色。

代码示例：

<template>
  <div v-for="(item, index) in list" :key="item.id">
    {{item.title}}
    <div class="delete-btn" :class="{color: activeIndex === index}" @mouseenter="handleMouseenter(index)" @mouseleave="handleMouseleave(index)">
      删除
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{id: 1, title: 'item1'}, {id: 2, title: 'item2'}, {id: 3, title: 'item3'}],
      activeIndex: null
    }
  },
  methods: {
    handleMouseenter(index) {
      this.activeIndex = index
    },
    handleMouseleave() {
      this.activeIndex = null
    }
  }
}
</script>

<style>
.delete-btn {
  display: inline-block;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px 10px;
  cursor: pointer;
}

.delete-btn.color {
  background-color: #f00;
  color: #fff;
}
</style>