vue官网鼠标划上图片 然后显示一堆文字效果 怎么写出来的

Vue官网实现图片悬停显示文字效果通常是通过CSS伪类`:hover`配合JavaScript来完成的。下面是一个简单的示例步骤：

1. HTML部分：

<!-- 使用img标签 -->
<img src="your-image-url" @mouseover="showTooltip" @mouseout="hideTooltip" alt="Your Image">
<!-- 为了展示文字，可以添加一个隐藏的<div>元素作为tooltip -->
<div v-show="isTooltipVisible" class="tooltip">{{ tooltipText }}</div>

2. CSS部分：

.tooltip {
  position: absolute;
  display: none;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #ccc;
}
.tooltip:hover {
  display: block;
}

3. Vue.js部分：

export default {
  data() {
    return {
      isTooltipVisible: false,
      tooltipText: '', // 初始化的文字内容
    };
  },
  methods: {
    showTooltip() {
      this.isTooltipVisible = true; // 图片鼠标悬停时显示tooltip
      this.tooltipText = '这里是悬停提示信息'; // 设置提示文字
    },
    hideTooltip() {
      this.isTooltipVisible = false; // 鼠标移开时隐藏tooltip
    },
  },
};

当鼠标移到图片上时，`showTooltip`方法会被调用，显示`.tooltip`元素；移开图片则调用`hideTooltip`方法隐藏它。