vue自定义按钮单选和多选

自定义按钮单选：

单选效果图如上

用for循环出每一项的Index作为判断依据，index改变后 把index给num,改变其动态样式。此处的样式用的是tm-vuetify框架里的样式，动态的样式必须写在style里，否则不起作用。

<view class=" flex flex-wrap">
	<view class="type flex-center text-size-n ma-20 mb-5 py-20 px-20" v-for="(item,index) in punishList" :key="index" :class="[num == index ? 'type_tips' : '']" @click="changeIndex(index)">{{item}}</view>
</view>

num:0,

changeIndex(index){
	this.num = index
},

.type{
		background: #f0f0f0;
		color: #7c7c7c;
	}
.type_tips{
	  background: #ffa16a;
	  color: #fff;
	}

自定义按钮多选和反选：

多选效果图如上

利用includes()匹配来实现，
includes的用法：用于搜索筛选关键字 后把数据重新渲染列表

//使用includes方法，查找checkedGroup的选项
<view class=" flex flex-wrap">
<view class="type flex-center text-size-n ma-20 mb-5 py-20 px-20" v-for="item in forceList" @click="handActive(item)" :class="{type_tips:checkedGroup.includes(item)}">{{item}}</view>
</view>

handActive(v,i){ 
	if(this.checkedGroup.includes(v)){
	// 反选的
		this.checkedGroup=this.checkedGroup.filter(function (ele){return ele != v;});
	}else{
	// 选中的
		this.checkedGroup.push(v);
	}
},

.type{
	background: #f0f0f0;
	color: #7c7c7c;
}
.type_tips{
	background: #ffa16a;
    color: #fff;
}