vue 列表 萌层 鼠标移入移出_vue鼠标移入移出动态改变dom背景图

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

三、鼠标移入移出事件

image.png

@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">

{{item.name}}

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

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日的周末下午。

朋友，祝你开心