为什么在 Vue.js 中使用 v-if、v-else、@mouseover 和 @mouseleave 时，每个文本都会显示在 img hover 上？答案

【问题标题】：Why every text shows on img hover when using v-if, v-else, @mouseover and @mouseleave in Vue.js?为什么在 Vue.js 中使用 v-if、v-else、@mouseover 和 @mouseleave 时，每个文本都会显示在 img hover 上？
【发布时间】：2021-11-18 14:28:50
【问题描述】：

我正在尝试使用 Vue.js 在图像上创建悬停效果。我编写了以下代码，但现在当我将鼠标悬停在其中一张图像上时，文本显示在所有图像上。我该如何解决这个问题？我只希望出现属于我悬停的图像的文本。提前感谢您的帮助。

Vue 模板：


<template>
<div class="row partner-body-row">
        <div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = true"
            @mouseleave="showText = false"
          >
            <img
              class="hover-img"
              src="img/img-1"
              alt="img-1"
            />
            <span v-if="showText">Text 1</span>
          </div>
        </div>
<div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = true"
            @mouseleave="showText = false"
          >
            <img
              class="hover-img"
              src="img/img-2"
              alt="img-2"
            />
            <span v-if="showText">Text 2</span>
          </div>
        </div>
        <div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = true"
            @mouseleave="showText = false"
          >
            <img
              class="hover-img"
              src="img/img-3"
              alt="img-3"
            />
            <span v-if="showText">Text 3</span>
          </div>
        </div>
        
     <div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = true"
            @mouseleave="showText = false">
            <img
              class="hover-img"
              src="img/img-4"
              alt="img-4"
            />
            <span v-if="showText">Text 4</span>
          </div>
        </div>
      </div>
</template>

脚本：

export default {
  data: () => {
    return {
      showText: false,
    };
  },
};

【问题讨论】：

标签： javascript html vue.js vue-component

【解决方案1】：

所有条件都与同一个变量相关联，让该变量保存每个图像的编号，而不仅仅是真/假。

理想情况下，这应该在 CSS 中使用:hover 完成

<template>
<div class="row partner-body-row">
        <div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = 1"
            @mouseleave="showText = 0"
          >
            <img
              class="hover-img"
              src="img/img-1"
              alt="img-1"
            />
            <span v-if="showText === 1">Text 1</span>
          </div>
        </div>
<div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = 2"
            @mouseleave="showText = 0"
          >
            <img
              class="hover-img"
              src="img/img-2"
              alt="img-2"
            />
            <span v-if="showText === 2">Text 2</span>
          </div>
        </div>
        <div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = 3"
            @mouseleave="showText = 0"
          >
            <img
              class="hover-img"
              src="img/img-3"
              alt="img-3"
            />
            <span v-if="showText === 3">Text 3</span>
          </div>
        </div>
        
     <div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = 4"
            @mouseleave="showText = 0">
            <img
              class="hover-img"
              src="img/img-4"
              alt="img-4"
            />
            <span v-if="showText === 4">Text 4</span>
          </div>
        </div>
      </div>
</template>

export default {
  data: () => {
    return {
      showText: 0,
    };
  },
};

【讨论】：

您确定没有更简单的解决方案吗？我必须为每个 img 写一个新变量？如果我用 foreach 遍历变量怎么办？
更新了一个更简单的解决方案，让 showText 保存悬停图像的编号，当没有悬停时为 0，而不是不适合多个状态的二进制 true false。

【解决方案2】：

您可以使用工具提示为每个图像创建一个组件，例如：

Vue.config.productionTip = false;

const Img = {
  name: 'Img',
  props: ['src'],
  data() {
    return { showText: false }
  },
  template: '<div><img @mouseover="showText = true" @mouseleave="showText = false":src="src" /><span v-if="showText">Tooltip</span></div>',
};

const App = new Vue({
  el: '#root',
  components: { Img },
  template: '<div><Img src="https://via.placeholder.com/150"/><Img src="https://via.placeholder.com/150"/></div>',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"/>

【讨论】：

【解决方案3】：

如果只是在悬停时显示文本。您不需要使用 v-model。在这种情况下，您将使用 css。

您可以从<span> 中删除所有v-if's 并添加此css

  .image-container span {
     display: 'none';
  }

  .image-container:hover span {
    display: 'block';
  }

【讨论】：