Basically I want to change the image src on hover. here is my code:
<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>
after hovering on li element i want the hovered image to be green
Create a variable in your data called hovered
where you store the key of the hovered image, and conditionally select the image you need based on that variable
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.