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元素上后，我希望悬停的图像变为绿色。

- Mostafa Abedi

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>

- gbalduzzi