Vue如何实现鼠标悬浮时，展示与隐藏弹窗的功能

在Vue中，可以通过监听元素的鼠标事件来实现鼠标悬浮时显示弹窗，鼠悬浮离开时隐藏弹窗。以下是一个简单的示例：

<template>
  <div>
    <button @mouseenter="showPopup = true" @mouseleave="showPopup = false">
      鼠标悬浮显示弹窗
    </button>
    <div v-if="showPopup" class="popup">
      这是弹窗内容
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showPopup: false,
    };
  },
};
</script>
 
<style>
.popup {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

在这个例子中，我们有一个按钮，当鼠标悬浮上去时，会通过修改showPopup的值为true来显示弹窗，鼠标离开按钮时会将showPopup的值设置为false来隐藏弹窗。弹窗是通过v-if指令来控制显示与隐藏的。