<style>
.main {
height: 300px;
width: 100px;
}
.imgs {
height: 100%;
}
.a {
background-color: brown;
width: 200px;
height: 100px;
}
</style> <div>
<div>
<img class="imgs" :src="picture" />
</div>
<div
class="a"
@mouseover="everMouseover()"
@mouseleave="elevMouseleave()"
></div>
</div><script>
export default {
data() {
return {
imgObj: {
immigrate: require("./img/tu1.jpeg"),
shift_out: require("./img/tu2.jpeg"),
},
picture: require("./img/tu1.jpeg"),
};
},
model: {
//滑鼠移入觸發
everMouseover: function () {
this.picture = this.imgObj.immigrate;
},
//滑鼠移出觸發
elevMouseleave: function () {
this.picture = this.imgObj.shift_ouf;
},
},
};
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/404163.html
標籤：其他