我们要实现的功能图示：
可以看到，鼠标点击一项时，它的logo样式和文字样式都发生了改变。那这是怎么做的呢？
1.文字切换样式
文字用router-link的鼠标切换样式写的, 通过配置active.
vue3中router-link鼠标切换样式实现链接
2.两张图片切换
logo的状态改变是由两组图片实现的，一组是未选中状态，一组是选中状态。
分析： 利用状态值，初始时渲染第一组图片，鼠标点击时给一个点击事件，状态值改变，切换第二组图片。
步骤：
- 数组：首先要把每一项的两个状态的图片分在一组对象，共分四组。
- 状态值：在每组里加上状态值active,初始值为false, 表示未选中，img渲染的时候也要用三元表达式选择active是true还是false时分别对应哪个状态。
- 鼠标点击事件里：一开始默认值是false,未选中，鼠标点击要把状态改为相反的，如果是true,改成false,如果是false,改成true.
- 并且在下一次点击之时，首先要把值全部改为初始状态false,因为你不止点击一个项，如果值不更改为初始false的话，可能你这次点击这个项，这项改成true了，下次点击另一个项，另一个项也由false变成true了，这个项还是true,会出现你点击过的项都变成true的情况。
例图：
<template>
<div class="container">
<div class="row" >
<div class="col" v-for="(item,index) in imgarr" @click="Change(index)" :key='index'>
<router-link :to="item.path">
<!-- 步骤2，三元表达式 状态值为条件 决定渲染哪个url -->
<img :src="item.active?item.urls:item.url" ><br>
<span>{
{item.text}}</span>
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'footer',
data() {
return {
// 步骤1：两个状态图片放一组+状态值为false,显示第一个url
imgarr:[
{
id:0,url:require("../../../public/img/common/footer/nav1.png"),urls:require('../../../public/img/common/footer/nav11.png'),active:false,text:'首页',path:'/'},
{
id:1,url:require('../../../public/img/common/footer/nav2.png'),urls:require('../../../public/img/common/footer/nav22.png'),active:false,text:'分类',path:'/goodscate'},
{
id:2,url:require('../../../public/img/common/footer/nav3.png'),urls:require('../../../public/img/common/footer/nav33.png'),active:false,text:'购物车',path:'/mycart'},
{
id:3,url:require('../../../public/img/common/footer/nav4.png'),urls:require('../../../public/img/common/footer/nav44.png'),active:false,text:'我的',path:'/userhome'}
],
}
},
methods:{
Change(index){
//两个图片切换状态代码
// 前提条件： 本身imgarr里的active值为false,img会执行url,未选中状态。
// 这段代码的意思是: 鼠标点击进入代码，代码1是最后一步。
// 然后执行代码2,
// if(active):
// active变成false
// else:
// active变成true
// 然后下一次先执行代码1,让active的值重新回到初始false。
// 代码1 步骤4
this.imgarr.forEach(function(item,index){
item.active=false;
})
// 代码2 步骤3
this.imgarr[index].active=!this.imgarr[index].active;
}
}
}
</script>
<style scoped>
.active span{
color: orangered;
}
/* 鼠标移上时去掉下划线 */
a:hover{
text-decoration: none;
color:red
}
img{
width: 40px;
height: 40px;
vertical-align:middle
}
</style>