使用Vue.js的v-if、@mouseover实现图片悬停时所有文本都显示如何解决

问题根因 #

你所有图片共用了同一个全局的showText布尔变量，任意图片触发悬停修改这个变量后，所有绑定该变量的文本都会同步显示，就会出现所有文本一起出现的问题。 #

解决方案 #

方案1：数组循环渲染（推荐，代码易维护） #

把图片和对应文本整理成数组，用索引标记当前悬停的图片，只有索引匹配的文本才显示。

修改后script代码：

export default {
  data: () => {
    return {
      // 统一维护所有图片配置，后续新增直接加数组项即可
      imgList: [
        { src: "img/img-1", alt: "img-1", text: "Text 1" },
        { src: "img/img-2", alt: "img-2", text: "Text 2" },
        { src: "img/img-3", alt: "img-3", text: "Text 3" },
        { src: "img/img-4", alt: "img-4", text: "Text 4" },
      ],
      // 存储当前悬停的图片索引，初始-1表示无悬停
      activeHoverIndex: -1
    };
  },
};

修改后template代码：

<template>
  <div class="row partner-body-row">
    <div class="col" v-for="(item, index) in imgList" :key="index">
      <div
        class="img-wrapper"
        @mouseover="activeHoverIndex = index"
        @mouseleave="activeHoverIndex = -1"
      >
        <img
          class="hover-img"
          :src="item.src"
          :alt="item.alt"
        />
        <span v-if="activeHoverIndex === index">{{ item.text }}</span>
      </div>
    </div>
  </div>
</template>

方案2：不改动现有结构，单独标记每个图片 #

如果不想改现有重复写的代码结构，可以把变量改为存储当前悬停的唯一标识，只有匹配标识的文本才显示。

修改后script代码：

export default {
  data: () => {
    return {
      // 存储当前悬停的图片标识
      hoverKey: ''
    };
  },
};

修改后template示例（其余图片同理修改即可）：

<div class="col">
  <div
    class="img-wrapper"
    @mouseover="hoverKey = 'img1'"
    @mouseleave="hoverKey = ''"
  >
    <img
      class="hover-img"
      src="img/img-1"
      alt="img-1"
    />
    <span v-if="hoverKey === 'img1'">Text 1</span>
  </div>
</div>

方案3：纯CSS实现（无额外JS逻辑需求时推荐） #

如果只是单纯的悬停显示文本，没有其他交互逻辑，可以完全不用写JS代码，直接加CSS样式即可实现：

/* 文本默认隐藏 */
.img-wrapper span {
  display: none;
  /* 保留你原来的文本位置、样式等配置 */
}
/* 父容器悬停时显示对应文本 */
.img-wrapper:hover span {
  display: block;
}

内容的提问来源于stack exchange，提问作者High T