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; }, }, };
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue项目实现鼠标移入移出更改图片代码
码云笔记 » Vue项目实现鼠标移入移出更改图片代码