时间戳

首页 > 解决方案 > Vue.js - 如何隐藏带有悬停事件的图像并显示另一个？

javascript - Vue.js - 如何隐藏带有悬停事件的图像并显示另一个？

问题描述

我有两张图片，接下来我想看看它们的行为。默认情况下，图像将显示名称为“home”，事件“mouseover”我想隐藏并显示名称为“blackhome”的图像。我在屏幕上显示了两个图像，鼠标事件没有任何反应，我不知道这是否可能。这是问题 https://codepen.io/CharlieJS/pen/gOrayzW的 codepen 链接

这是我的模板

                      <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>

提前感谢您的时间和帮助

标签： javascriptvue.jsvuejs2vue-componentvuex

解决方案

尝试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>

推荐阅读