技巧2.1 vue3中鼠标点击 图片logo+文字 切换状态 两图片切换状态

我们要实现的功能图示：

可以看到，鼠标点击一项时，它的logo样式和文字样式都发生了改变。那这是怎么做的呢？

1.文字切换样式

文字用router-link的鼠标切换样式写的, 通过配置active.
vue3中router-link鼠标切换样式实现链接

2.两张图片切换

logo的状态改变是由两组图片实现的，一组是未选中状态，一组是选中状态。

分析： 利用状态值，初始时渲染第一组图片，鼠标点击时给一个点击事件，状态值改变，切换第二组图片。

步骤：

1. 数组：首先要把每一项的两个状态的图片分在一组对象，共分四组。
2. 状态值：在每组里加上状态值active,初始值为false, 表示未选中，img渲染的时候也要用三元表达式选择active是true还是false时分别对应哪个状态。
3. 鼠标点击事件里：一开始默认值是false,未选中，鼠标点击要把状态改为相反的，如果是true,改成false,如果是false,改成true.
4. 并且在下一次点击之时，首先要把值全部改为初始状态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=</