一、首先若要循環(huán)遍歷出數(shù)組背景圖片，相對(duì)或絕對(duì)路徑都行，但必須要用require引入，如下：
image.png
itemList: [{
name: '可視化數(shù)據(jù)展示',
itemUrl: require('../assets/1.png'),
activeItemUrl: require('../assets/11.png'),
outUrl:'http://jsxylongxia.com:10035',
},
{
name: '盱眙電商銷(xiāo)售平臺(tái)',
itemUrl: require('../assets/2.png'),
activeItemUrl: require('../assets/22.png'),
outUrl:'http://jsxylongxia.com',
},
{
name: '盱眙質(zhì)量追溯系統(tǒng)',
itemUrl: require('../assets/3.png'),
activeItemUrl: require('../assets/33.png'),
outUrl:'http://jsxylongxia.com:10045/',
},
{
name: '省農(nóng)產(chǎn)品追溯平臺(tái)',
itemUrl: require('../assets/4.png'),
activeItemUrl: require('../assets/44.png'),
outUrl:'http://www.jsncpaq.com/',
},
{
name: '省水產(chǎn)品追溯平臺(tái)',
itemUrl: require('../assets/5.png'),
activeItemUrl: require('../assets/55.png'),
outUrl:'http://www.jssczs.org/',
},
],
二、dom中的寫(xiě)法
image.png
<div class="itemImg" :style="{ backgroundImage: 'url(' + item.itemUrl + ')' }"></div>
三、鼠標(biāo)移入移出事件
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>
四、鼠標(biāo)事件重新賦值背景值
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+')'
}
