使用vue实现，当鼠标移入和移出时，两种图片切换显示。

项目情况：菜单上的图片的src的相对路径从后台icon字段中动态去找到并加载。

html代码：

<el-menu>
	<el-menu-item v-for="child1 in resultData" 
				  v-if="!child1.child|| child1.child.length ==0" 
				  :index='child1.index'>
		<div @mouseover="transToWhite(child1.icon,$event)" 
			 @mouseleave="transToBlack(child1.icon,$event)">
	    	<img :src="child1.icon|showPic" v-if="child1.index" 
	    		  style="height:20px;width:20px"/>
	        <span slot="title">{{child1.moduleNm}}</span>
	    </div>
	</el-menu-item>
</el-menu>

JavaScript代码：

method:{
	transToWhite:function(url,e){   //鼠标移入触发改变img的src为白色图片的路径
    	// url--->接受的是后台数据smallIcon字段的路径
        // e.target--->当前触发事件的dom元素
        var urlArr = url.split('/');
        var tem = urlArr[urlArr.length-1];
        var finalImg = tem.split(".");
        finalImg[0] = finalImg[0]+'-w.png';     //白色图片后缀拼接-w
        urlArr[urlArr.length-1] = finalImg[0];
        url = urlArr.join('/');                 //将新的图片路径组装饭回去
        e.target.getElementsByTagName("img")[0].src = '${ctx}/'+url;    //直接改变img节点的属性
   },
   transToBlack:function(url,e){ //鼠标移出触发改变img的src为黑色图片的路径
   		//鼠标移出时，将图片的路径恢复成smallIcon的值即可，不用二次还原拼接路径
   		e.target.getElementsByTagName("img")[0].src = '${ctx}/'+url;    
   }
}