javascript - Vuejs在悬停时更改图像src

Question

基本上我想在悬停时更改图像 src。这是我的代码:

<li v-for="(item, key) in items" @mouseover="changeImg">
    <img :src="item.img.grey">
    <p>{{key}}</p>
</li>

<script>
 app = new Vue({
        el: '#app',
        data: {
            items: {
             first:{
                  img:{
                     grey:'assets/img/first-grey.png',
                     green:'assets/img/first-green.png'
                  }
             },
             second:{
                  img:{
                     grey:'assets/img/second-grey.png',
                     green:'assets/img/second-green.png'
                  }
             },
          },
        },
        methods: {
            changeImg(key) {
                //selected li's image should be green
            }
        }
    })
 </script>

悬停在 li 元素上后，我希望悬停的图像为绿色

Answer 1

在您的数据中创建一个名为 hovered 的变量您存储悬停图像的键的位置，并根据该变量有条件地选择您需要的图像

<li v-for="(item, key) in items">
    <img :src="hovered === key ? item.img.green : item.img.grey" 
         @mouseover="hovered = key"
         @mouseleave="hovered = null">
    <p>{{key}}</p>
</li>

<script>
 app = new Vue({
        el: '#app',
        data: {
            hovered: null,
            items: {
             first:{
                  img:{
                     grey:require('assets/img/first-grey.png'),
                     green:require('assets/img/first-green.png)'
                  }
             },
             second:{
                  img:{
                     grey:require('assets/img/second-grey.png'),
                     green:require('assets/img/second-green.png')
                  }
             },
          },
        },
    })
</script>