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>