实现多张Vue 悬停图片时覆盖图片显示隐藏文本内容

要实现多张Vue悬停图片时覆盖图片显示隐藏文本内容，你可以使用Vue的绑定指令和CSS样式来实现。

首先，在HTML中使用v-for指令循环遍历图片数组，使用v-bind指令将每个图片的路径绑定到img标签的src属性上，同时给每个图片添加一个class名，用来控制CSS样式。

<div class="container">
  <div v-for="(img, index) in images" :key="index" class="image-wrapper">
    <img :src="img.src" :class="'img-' + index">
    <div class="text">{{img.text}}</div>
  </div>
</div>

接下来，在CSS中设置图片的样式，将图片的position属性设置为relative，将文本的position属性设置为absolute，然后使用z-index属性将文本的层级设置在图片上方。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image-wrapper {
  position: relative;
  margin: 10px;
}

img {
  width: 200px;
  height: 200px;
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
}

.img-0:hover + .text {
  display: flex;
}

.img-1:hover + .text {
  display: flex;
}

.img-2:hover + .text {
  display: flex;
}

/* 根据需要设置更多的图片和文本的样式 */

最后，在Vue中定义图片数组，每个图片包含一个src属性和一个text属性，分别表示图片路径和显示的文本内容。

new Vue({
  el: '#app',
  data: {
    images: [
      {
        src: 'img1.jpg',
        text: '这是第一张图片的文本内容'
      },
      {
        src: 'img2.jpg',
        text: '这是第二张图片的文本内容'
      },
      {
        src: 'img3.jpg',
        text: '这是第三张图片的文本内容'
      }
    ]
  }
})

这样就可以实现多张Vue悬停图片时覆盖图片显示隐藏文本内容了。当鼠标悬停在图片上时，对应的文本内容会显示出来。