vue 图片 鼠标悬停 显示文字

要在 Vue 中实现当鼠标悬停在图片上时显示文字的效果，可以使用 Vue 的指令和绑定事件来实现。具体实现步骤如下：

1. 在模板中使用 v-bind 指令将图片的 src 属性绑定到组件的数据属性中。

2. 使用 v-on 指令绑定鼠标悬停事件，当鼠标悬停时触发事件处理函数。

3. 在事件处理函数中修改组件的数据属性，将文字内容保存在数据属性中。

4. 使用 v-if 指令判断鼠标是否悬停在图片上，如果是则显示文字内容，否则隐藏文字内容。

下面是一个简单的示例代码：

<template>
  <div>
    <img v-bind:src="imageUrl" v-on:mouseenter="showText" v-on:mouseleave="hideText">
    <p v-if="show">图片描述</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '图片地址',
      show: false,
    }
  },
  methods: {
    showText() {
      this.show = true
    },
    hideText() {
      this.show = false
    },
  },
}
</script>

在这个示例中，当鼠标悬停在图片上时，会触发 showText 函数，将 show 属性设置为 true，从而显示文字内容。当鼠标离开图片时，会触发 hideText 函数，将 show 属性设置为 false，从而隐藏文字内容。