[英]Vuejs changing image src on hover
基本上我想更改 hover 上的图像 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 元素上后,我希望悬停的图像为绿色
在您的数据中创建一个名为hovered
的变量,您可以在其中存储悬停图像的键,并根据该变量有条件地 select 您需要的图像
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.