使用vue2实现①　一个网页上有多幅图像，当鼠标停留在某图像上，则该图像加边框，鼠标离开，则边框消失 ②　有一个登陆界面，点击提交按钮则alert方式弹出“你进行了提交操作”，如在密码输入框回车也实现一样功能

在 Vue 2 中，你可以使用 v-bind:class 和 @mouseenter/@mouseleave 事件来实现这两个需求。 ① 实现图片动态边框效果： ```html <div id="image-container"> <img :src="imageSrc" v-for="(image, index) in images" :key="index" :alt="image.alt" class="thumbnail" :class="{ active: isHoveringOver(index) }" @mouseenter="setActive(index)" @mouseleave="unsetActive(index)"> </div> <script> export default { data() { return { images: ['image1', 'image2', ...], // 图片数组 imageSrc: '', // 初始化为空，后续从服务器获取 isHoveringOver: () => false, // 初始状态，非悬停 }; }, methods: { setActive(index) { this.isHoveringOver = () => true; }, unsetActive(index) { this.isHoveringOver = () => false; // 在这里添加CSS样式，例如： document.getElementById(`thumbnail-${index}`).classList.remove('active'); }, }, }; </script> <style scoped> .thumbnail { transition: border-color 0.3s ease; } .active { border: 1px solid red; /* 边框颜色和宽度自定义 */ } </style> ``` ② 登录界面处理submit和Enter键： ```html <form @submit.prevent="handleFormSubmit"> <input type="password" v-model="password" @keyup.enter="handleFormSubmit"> <button type="submit">登录</button> </form> <script> export default { data() { return { password: '', }; }, methods: { handleFormSubmit() { alert('你进行了提交操作'); }, }, }; </script> ```

阅读全文

使用vue2实现① 一个网页上有多幅图像，当鼠标停留在某图像上，则该图像加边框，鼠标离开，则边框消失 ② 有一个登陆界面，点击提交按钮则alert方式弹出“你进行了提交操作”，如在密码输入框回车也实现一样功能

大家在看

51单片机ADC0832的Proteus仿真.zip

Android openssl 全平台.a文件

B50610-DS07-RDS(博通千兆以太网手册) - 副本.pdf

STM32H743驱动SDRAM读写（W9825G6KH）【支持STM32H7系列单片机_寄存器库驱动】.zip

Winform程序使用验证码

最新推荐

2022代理软件销售协议书.docx

2022内部审计中的大数据思维.docx

2022Adobe认证试题及答案「photoshop」.docx

2021年通信工程概预算试题库.doc

2021电子商务有这些就业方向-戳进来看看.docx

ChmDecompiler 3.60：批量恢复CHM电子书源文件工具

【数据融合技术】：甘肃土壤类型空间分析中的专业性应用

redistemplate.opsForValue()返回值

ktorrent 2.2.4版本Linux客户端发布

【空间分布规律】：甘肃土壤类型与农业生产的关联性研究

使用vue2实现①　一个网页上有多幅图像，当鼠标停留在某图像上，则该图像加边框，鼠标离开，则边框消失 ②　有一个登陆界面，点击提交按钮则alert方式弹出“你进行了提交操作”，如在密码输入框回车也实现一样功能