使用uniapp（Vue3）通过列表渲染点击盒子改变里面的图片和盒子样式且只能点击别的盒子时才能返回原来的样式和图片，重复点击本身也改变不了自己的样式和图片

这个的话直接上代码：先是temp部分

tmplate部分

<template>
	<view class="content">
		<view class="roud" v-for="(item,index) in box" :key="index"  @click="taps(index)" >
			<view class="braw" :class="{active: activeclude == index}"  >
                <image :src="activeclude === index ? item.imgs : item.img" mode="aspectFit" style="width: 50rpx; height: 50rpx;"></image>
                <!-- <image v-else  :src="item.imgs" mode="aspectFit" style="width: 50rpx; height: 50rpx;"></image> -->
			</view>
			<view class="text">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

script部分：

<script>
	export default {
		data() {
			return {
				activeclude:0,
				box: [{
						name: '餐饮',
						classone: 'braw',
						img:'/static/Tall-Book-Images/cy.png',
						imgs:'/static/Tall-Book-Images/cy1.png'
					},
					{
						name: '交通',
						classone: 'braw',
						img:'/static/Tall-Book-Images/jt.png',
						imgs:'/static/Tall-Book-Images/jt1.png',
					},
					{
						name: '服饰',
						classone: 'braw',
						img:'/static/Tall-Book-Images/yf.png',
						imgs:'/static/Tall-Book-Images/yf1.png'
					},
					{
						name: '购物',
						classone: 'braw',
						img:'/static/Tall-Book-Images/gw.png',
						imgs:'/static/Tall-Book-Images/gw1.png'
					},
					{
						name: '服务',
						classone: 'braw',
					},
					{
						name: '教育',
						classone: 'braw',
					},
					{
						name: '娱乐',
						classone: 'braw',
					},
					{
						name: '运动',
						classone: 'braw',
					},
					{
						name: '生活缴费',
						classone: 'braw',
					},
					{
						name: '旅行',
						classone: 'braw',
					},
					{
						name:'宠物',
						classone:'braw',
					},
					{
						name:'医疗',
						classone:'braw',
					},
					{
						name:'保险',
						classone:'braw',
					},
					{
						name:'公益',
						classone:'braw',
					},
					{
						name:'发红包',
						classone:'braw',
					},
					{
						name:'转账',
						classone:'braw',
					},
					{
						name:'亲属卡',
						classone:'braw',
					},
					{
						name:'其他人情',
						classone:'braw',
					},
					{
						name:'退还',
						classone:'braw',
					},
					{
						name:'其他',
						classone:'braw',
					}
				
				]
			}
		},
		methods:{
			taps(index){
				// this.activeclude = index
				// console.log(this.activeclude)
				if(this.activeclude !== index){
					this.activeclude = index;
				}
			}
		}
	}
</script>

style部分：

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: auto;
		overflow-y: scroll;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-flow: row wrap;
	}

	.braw {
		
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #f7f7f7;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.roud {
		
		height: 100%;
		display: flex;
		width: 142rpx;
		margin: 20rpx 10rpx 0 30rpx;
		align-items: center;
		flex-flow: column wrap;
		justify-content: center;
	}
   
    .active{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #5b8cf7;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.text {
		
		height: 50rpx;
		width: 142rpx;
		color: #7f7f7f;
		font-size: 30rpx;
		line-height: 70rpx;
		text-align: center;
	}
</style>

这里我就先拿box中的前四个对象来举例

原理：

首先听过v-for列表渲染中index找到box中的每个对象，然后定义一个索引activeclude=0，让然后通过点击事件taps（index）将index的值赋值给index。

通过activeclude来改变盒子和图片的样式、切换:class="{active: activeclude == index}"、     :src="activeclude === index ? item.imgs : item.img