标签：normal img def span 图片显示 mouse load method style
今天写页面是需要一个功能，列表全部显示图片，鼠标悬浮后显示文字，未悬浮的显示图片，始终有一项显示为文字
当鼠标悬浮至其他项时，如果不对其他项进行鼠标悬浮操作，鼠标移开后，该项依旧显示文字
<div v-for="(item, index) in itemList"> <lable>{{ item.name }}</lable> <lable><img :src="require(‘../../assets/images/base/‘+ item.url + ‘_normal.png‘)"></lable> </div>
因为图片是不同的，所以url地址不能写死
在export default 的data中输入以下内容：
url为你图片的url名称
data () {
return {
itemList: [
{ index: 1, name: ‘风速‘, url: ‘1033‘ },
{ index: 2, name: ‘空气温度‘, url: ‘1001‘ },
{ index: 3, name: ‘空气湿度‘, url: ‘1002‘ },
{ index: 4, name: ‘露点‘, url: ‘1036‘ },
{ index: 5, name: ‘光照强度‘, url: ‘1030‘ },
{ index: 6, name: ‘紫外线强度‘, url: ‘1031‘ },
{ index: 7, name: ‘光合有效辐射‘, url: ‘1032‘ },
{ index: 8, name: ‘风向‘, url: ‘1034‘ },
{ index: 9, name: ‘雨量‘, url: ‘1035‘ },
],
}
},
页面将会把所有内容通过v-for循环渲染，
给节点加鼠标悬浮事件，以及label的动态v-show
<div v-for="(item, index) in itemList" @mouseenter="enters(index)"> <!--新增鼠标悬浮事件-->
<lable v-show="switchNice[index].arry">{{ item.name }}</lable>
<lable v-show="switchNice[index].arrys"><img :src="require(‘../../assets/images/base/‘+ item.url + ‘_normal.png‘)"></lable>
</div>
<!-- 在data中添加swicthNice，绑定vue中的v-show，swicthNice的数组长度和itemList数组长度一致 --> switchNice: [ { arry: true, arrys: false }, { arry: false, arrys: true }, { arry: false, arrys: true }, { arry: false, arrys: true }, { arry: false, arrys: true }, { arry: false, arrys: true }, { arry: false, arrys: true }, { arry: false, arrys: true }, { arry: false, arrys: true } ],
methods: {
enters(index) {
this.switchNice[index].arrys = false; // 当前鼠标悬浮所在的图片隐藏
for (let m = 0; m < this.switchNice.length; m++) { // 循环switchNice数组
if (m === index) {
this.switchNice[m].arry = true; // 当数组和index相同时，文字显示
} else { // 不同时，图片显示，文字隐藏
this.switchNice[m].arry = false;
this.switchNice[m].arrys = true;
}
}
},
}
如果需要鼠标悬浮显示文字，鼠标退出，显示图片，可以给div在加一个鼠标离开事件
@mouseleave="leaver(index)
methods： { leaver(index) { this.switchNice[index].arry = false; // 文字隐藏
this.switchNice[index].arrys = true; //图片显示
}, }
上面的鼠标悬浮enters事件也需要改成下列内容
methods： {
enters(index) {
this.switchNice[index].arrys = false; //图片隐藏
this.switchNice[index].arry = true; // 文字显示
}, }
标签：normal img def span 图片显示 mouse load method style
原文地址：https://www.cnblogs.com/ymbcc/p/13181176.html
