vue中hover怎么在标签中动态绑定（显示或隐藏）

在Vue中，你可以使用v-bind或简写:来动态绑定属性，包括自定义属性。如果你想要在hover时改变元素的样式或者进行其他操作，可以使用事件监听器，比如@mouseover和@mouseleave。

也可以通过display:none和display:flex来实现鼠标进入和移出的div的显示和隐藏

.show{
    display:none
    &:hover {
       display: flex;
    }
}

以下是一个简单的例子，展示了如何在Vue中动态绑定一个自定义的hover属性：

<template>
  <div>
    <div
      v-for="(item, index) in items"
      :key="index"
      :class="{ hovered: item.isHovered }"
      @mouseover="item.isHovered = true"
      @mouseleave="item.isHovered = false"
    >
      Hover over me!
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { isHovered: false },
        { isHovered: false },
        { isHovered: false },
        // ...
      ]
    };
  }
};
</script>
 
<style>
.hovered {
  background-color: yellow;
}
</style>

在这个例子中，我们有一个项目列表items，每个项目都有一个isHovered属性来跟踪它是否被鼠标悬停。通过mouseover和mouseleave事件监听器，我们更新isHovered的值。hovered类根据item.isHovered的值来应用样式。