vue鼠标悬停更改图片

 悬停

 html

 <div id="app">
        <second></second>
    </div>
<template id="tmp2">
        <div id="fotter">
            <ul>
               <li v-for="(item, index) in fotter" :key="index"
                @mouseover="over(index)" @mouseout="out(index)"
                :class="{name:index==color}">
                    <img :src="item.url1">
                    <p>{{item.name}}</p>
                </li>
            </ul>
        </div>
    </template>

css

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }         
        #fotter{
            width: 100%;
            position: fixed;
            bottom: 0;
            height: 45px;
            border-top: 1px gray solid;
        }
        #fotter ul{
            display: flex;
            height: 100%;
        }
        #fotter li{
            width: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #fotter img{
            width: 30px;
        }
        .name{
            color: red;
        }

js

const vm = new Vue({
        el:'#app',
        components:{
            second:{
                template:'#tmp2',
                data(){
                    return {
                        fotter:[
                            // url1为原图片，url2为悬停图片
                            {url1:'./img/1.png',url2:'./img/6.png',transfer:'',name:'首页'},
                            {url1:'./img/2.png',url2:'./img/7.png',transfer:'',name:'搜索'},
                            {url1:'./img/3.png',url2:'./img/8.png',transfer:'',name:'发现'},
                            {url1:'./img/4.png',url2:'./img/9.png',transfer:'',name:'购物车'},
                            {url1:'./img/5.png',url2:'./img/10.png',transfer:'',name:'我的'},
                        ],
                        // 不能为空，空值也相当于0，会在事件没有触发时就会更改字体颜色
                        color:'null'
                    }
                },
                methods:{
                    //鼠标悬停时，传入悬停的li下标
                    over(e) {
                        //让url1变成url2的地址，因为src已经引入url1的地址
                        //悬停时便改变图片地址，完成悬停改变图片功能，
                        //但是为了鼠标移走后，图片能够还原回来，则url1的地址必须得在
                        //所以在对象里面创建一个空的'中转站'transfer用来储存url1的值
                        this.fotter[e].transfer=this.fotter[e].url1;
                        this.fotter[e].url1=this.fotter[e].url2;
                        //使属性color等于悬停的li的下标，
                        // 这样当悬停的时候li的下标与属性相等时
                        // 便更改文字颜色
                        this.color=e
                    },
                    out(e){
                        //因为此时'中转站'transfer里面储存的使url1的地址，也就是未悬停前的地址
                        // 令url1的值重新变为原地址
                        this.fotter[e].url1=this.fotter[e].transfer;
                        //移走后li下标与color不相等，便不更改文字颜色
                        //此处不能为空，因为为空默认为0，相当于移出鼠标后，li[0]依然会更改颜色
                        this.color='null'
                    },
                   },

                }
            }
        
    });
</script>