为什么在 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 在图像上创建悬停效果。我编写了以下代码,但现在当我将鼠标悬停在其中一张图片上时,文本会显示在所有图片上。
我该如何解决这个问题?我只想显示属于我悬停的图像的文本。预先感谢您的帮助。
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,
};
},
};
所有条件都绑定到同一个变量,让该变量保存每个图像的编号,而不仅仅是 true/false。
理想情况下,这应该在 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,
};
},
};
您可以为每个带有工具提示的图像创建一个组件,例如:
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"/>
如果只是在悬停时显示文本。你不需要使用 v-model。在这种情况下,您将使用 css.
您可以从 <span>
中删除所有 v-if's
并添加此 css
.image-container span {
display: 'none';
}
.image-container:hover span {
display: 'block';
}
我正在尝试使用 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,
};
},
};
所有条件都绑定到同一个变量,让该变量保存每个图像的编号,而不仅仅是 true/false。
理想情况下,这应该在 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,
};
},
};
您可以为每个带有工具提示的图像创建一个组件,例如:
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"/>
如果只是在悬停时显示文本。你不需要使用 v-model。在这种情况下,您将使用 css.
您可以从 <span>
中删除所有 v-if's
并添加此 css
.image-container span {
display: 'none';
}
.image-container:hover span {
display: 'block';
}