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 } }