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

 

 

 

posted @   龙卷风吹毁停车场  阅读(52)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示