v-for 循环出来的元素,hover的时候对应更换img地址
<div class="row-center linegeid" v-for="(item, index) in routeNaigtion" :key="index" @mouseenter="changeImageSrc(item,true)" @mouseleave="changeImageSrc(item,false)" > <img :src="item.url" alt=""> <p>{{ item.textNav }}</p> </div>
routeNaigtion: [ { path: '/', url: require('@/assets/img/nav-img/main.png'), textNav: 'main site' ,hoverUrl: require('@/assets/img/nav-img/main-hover.png')}, { path: '/dashboard', url: require('@/assets/img/nav-img/dashboard.png'), textNav: 'dashboard' ,hoverUrl: require('@/assets/img/nav-img/dashboard-hover.png')}, { path: '/launchpad', url: require('@/assets/img/nav-img/launchpad.png'), textNav: 'launchpad' ,hoverUrl: require('@/assets/img/nav-img/launchpad-hover.png')}, { path: '/staking', url: require('@/assets/img/nav-img/staking.png'), textNav: 'staking' ,hoverUrl: require('@/assets/img/nav-img/staking-hover.png')}, { path: '/buy', url: require('@/assets/img/nav-img/buy.png'), textNav: 'buy SUISSE' ,hoverUrl: require('@/assets/img/nav-img/buy-hover.png')}, { path: '/bridge', url: require('@/assets/img/nav-img/bridge.png'), textNav: 'bridge' ,hoverUrl: require('@/assets/img/nav-img/bridge-hover.png')}, { path: '/airdrops', url: require('@/assets/img/nav-img/airdrops.png'), textNav: 'airdrops' ,hoverUrl: require('@/assets/img/nav-img/airdrops-hover.png')}, { path: '/stats', url: require('@/assets/img/nav-img/stats.png'), textNav: 'stats' ,hoverUrl: require('@/assets/img/nav-img/stats-hover.png')}, ], TemporaryStorage: '',
changeImageSrc(item, val){ if(val){ this.TemporaryStorage = item.url item.url = item.hoverUrl }else{ item.url = this.TemporaryStorage } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通