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 @ 2023-03-15 10:45  龙卷风吹毁停车场  阅读(61)  评论(0)    收藏  举报