一、首先若要循环遍历出数组背景图片，相对或绝对路径都行，但必须要用require引入，如下：

image.png

itemList: [{
                        name: '可视化数据展示',
                        itemUrl: require('../assets/1.png'), 
                        activeItemUrl: require('../assets/11.png'),
                        outUrl:'http://jsxylongxia.com:10035',
                    },
                    {
                        name: '盱眙电商销售平台',
                        itemUrl: require('../assets/2.png'),
                        activeItemUrl: require('../assets/22.png'),
                        outUrl:'http://jsxylongxia.com',
                    },
                    {
                        name: '盱眙质量追溯系统',
                        itemUrl: require('../assets/3.png'),
                        activeItemUrl: require('../assets/33.png'),
                        outUrl:'http://jsxylongxia.com:10045/',
                    },
                    {
                        name: '省农产品追溯平台',
                        itemUrl: require('../assets/4.png'),
                        activeItemUrl: require('../assets/44.png'),
                        outUrl:'http://www.jsncpaq.com/',
                    },
                    {
                        name: '省水产品追溯平台',
                        itemUrl: require('../assets/5.png'),
                        activeItemUrl: require('../assets/55.png'),
                        outUrl:'http://www.jssczs.org/',
                    },
                ],

二、dom中的写法

image.png

<div class="itemImg" :style="{ backgroundImage: 'url(' + item.itemUrl + ')' }"></div>

三、鼠标移入移出事件

image.png

<div 
            @mouseenter="mouseEnter(index,item.activeItemUrl)" 
            @mouseleave="mouseLeave(index,item.itemUrl)"
            @click="goOutUrl(item.outUrl)" 
            v-for="(item,index) in itemList" :key="index" 
            class="bottom_item">
                <div class="itemImg" :style="{ backgroundImage: 'url(' + item.itemUrl + ')' }"></div>
                <div class="itemFont">
                    {{item.name}}
                </div>
            </div>

四、鼠标事件重新赋值背景值

mouseEnter(index,url){ 
                var itemImg = document.getElementsByClassName('itemImg')[index]
                itemImg.style.backgroundImage = 'url('+url+')'
},
mouseLeave(index,url){
                var itemImg = document.getElementsByClassName('itemImg')[index]
                itemImg.style.backgroundImage = 'url('+url+')'
}

写于2020年10月25日的周末下午。

朋友，祝你开心