uni-app实现单选、多选改变样式

单选

	<!-- 单选 -->
	<view class="company-item" :class="{'active': isChange == index}"  v-for="(item, index) in list" :key="index" @click="clickBtn(index)">
		{{item}}
	</view>

	isChange:'-1', //单选
	list: [],   //接口获取到的数组

	// 判断 当前index 是否与 ischange 相等，不相等择改变背景为红色（代表选中），再次点击取消
	clickBtn(index){
		// 单选
		if(index!=this.isChange){
			this.isChange = index;
		}else{
			// this.isChange = -1;    //不注释则可以点击取消，注释之后点击就不再取消
		}
	},

多选

	<!-- 多选 -->
	<view class="skill-item" :class="{'active': isChange.indexOf(index)!=-1}"  v-for="(item, index) in list" :key="index" @click="clickBtn(index)"> 
		{{item}}
	</view>

	isChange:[],  //多选
	list: [],  //接口获取到的数组

	clickBtn(index){
		// 多选
		if (this.isChange.indexOf(index) == -1) {
			if(this.isChange.length == 3){
				uni.showToast({
					title:'最多选择三项',
					icon:'none'
				})
			}else{
				this.isChange.push(index);//选中添加到数组里
			}
		} else {
			this.isChange.splice(this.isChange.indexOf(index), 1); //取消选中
		}
		let list2 =  []
		for(let index in this.isChange){
			list2.push(this.list[this.isChange[index]])
		}
	},

样式

.company-item{
	width:200rpx;
	height:50rpx;
	border:2rpx solid #555;
	border-radius:10rpx;
	font-size:30rpx;
	color:#555;
	text-align: center;
	line-height: 50rpx;
}
.active{
	border:2rpx solid #DD524D;
	color: #DD524D;
}