Vue项目实现鼠标移入移出更改图片代码
HTML代码:
<div> <div> <img class="imgs" :src="picture" /> </div> <div class="a" @mouseover="everMouseover()" @mouseleave="elevMouseleave()" ></div> </div>
CSS代码:
.main { height: 300px; width: 100px; } .imgs { height: 100%; } .a { background-color: brown; width: 200px; height: 100px; }
JS代码:
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; }, }, };
声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » Vue项目实现鼠标移入移出更改图片代码
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » Vue项目实现鼠标移入移出更改图片代码