一、首先若要循环遍历出数组背景图片，相对或绝对路径都行，但必须要用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+')'
}
