tap切换如果有5个元素但是只需要点击4个元素产生颜色变化，第五个元素不需要颜色变化怎么实现？

代码如图所示：

​
<template>
	<view class="content">
		<view class="tap">
			<view v-for="(item,index) in box" :key="item.id" class="tap-box" :class="{active: activeindex === item.id}" @click="tap(item.id,index)">
				<view>{{item.name}}</view>
				<view v-if="index == 4"  style="padding-left: 10rpx;">
					<image :src="item.url" mode="aspectFit" style="width: 30rpx; height: 30rpx;"></image>
				</view>
			</view>
			<!-- <image src="/static/img/examine/shaixuan.png" mode="" style="background-color: #bebebe"></image> -->
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				activeindex:0,//tap索引	
				box:[
					{
						id:0,
						name:'待审批'
					},
					{
						id:1,
						name:'审批中'
					},
					{
						id:2,
						name:'审批通过'
					},
					{
						id:3,
						name:'已驳回'
					},
					{
						id:4,
						name:'筛选',
						url:'/static/img/examine/shaixuan.png'
					}
				]
			}
		},
		methods:{
			tap(id,index){
				if(id !== this.box.length -1){
					this.activeindex = id
				}
				this.ins=index
				console.log(this.ins)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
	}
	.tap{
		width: 100%;
		height: 80rpx;
		background-color: #ffffff;
		border-top:5rpx solid #f9f9f9;
		display: flex;
	}
	.tap-box{
		width: 200rpx;
		height: 80rpx;
		display: flex;
		color: #bebebe;
		justify-content: center;
		align-items: center;
	}
	.active{
		color: #6e90ff;
	}
</style>

​

关键代码：

我们可以通过一个if判断当id不等于box的最大长度时就把id的值赋值给activeIndex索引这样就可以触发：class中的样式效果如图所示：

这里我们可以看见因为我们判断的元素是id所以id最大只能是i-1（i=4）也就是3，但是index没有别判断所以任然可以等于数组长度的最大值index=4，这样的话点击筛选的时候就可以触发别的点击事件比如弹窗等，不会受到id条件的限制从而无法触发事件，（前提使用index来进行触发而不是id）。