如何解决Vue.js-如何隐藏带有悬停事件的图像并显示另一个图像?
我有两张图像,接下来要查看其行为。 默认情况下,图像将显示为名称“ home”,事件为“ mouseover”,我想隐藏并显示名称为“ blackhome”的图像。 我有两个图像显示在屏幕上,鼠标事件没有任何反应 我不知道这是否可能。 这是与此问题相关的Codepen链接 https://codepen.io/CharlieJS/pen/gOrayzW
这是我的模板
<li class="nav-item" @mouseover="homeLink = !homelink" @mouseleave="!homeLink" >
<a class='nav-link home' href="https://www.google.com/">
<img v-if="homeLink" class="logo" src="../../assets/home.png">
<img v-if="!homelink" src="../../assets/blackhome.png">
</a>
</li>
和我的脚本
export default {
data: function () {
return {
homeLink: false
}
},computed: {
auth () {
return this.$store.getters.isAuthenticated
}
},methods: {
onLogout() {
this.$store.dispatch('logout')
},}
}
</script>
预先感谢您的时间和帮助
解决方法
按如下所示尝试v-if
和v-else
>
<li class="nav-item" @mouseover="homeLink = !homelink" @mouseleave="homeLink=false" >
<a class='nav-link home' href="https://www.google.com/">
<img v-if="homeLink" class="logo" src="../../assets/home.png"/>
<img v-else src="../../assets/blackhome.png"/>
</a>
</li>
let app = new Vue({
el: "#app",data: function() {
return {
homeLink: false
}
},})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<li class="nav-item" @mouseover="homeLink = !homelink" @mouseleave="homeLink=false">
<a class='nav-link home' href="https://www.google.com/">
<img v-if="homeLink" class="logo" src="https://picsum.photos/300/200?image=244" />
<img v-else src="https://picsum.photos/300/200?image=1024" />
</a>
</li>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。