vue如何自定义按钮单选和多选

<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方法，查找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;
}

.contilor{
	width: 50%;
	margin: 5% auto;
}
.box{
	display: flex;
	flex-wrap: wrap;
}
.item{
	padding: 6px 8px;
	border: 1px solid #3C9CFF;
	margin: 8px 6px 0 10px;
	font-size: 12px;
	border-radius: 6px;
}
.item1{
	background-color: #3C9CFF;
	color: #fff;
}

<script type="text/javascript">
let itemData = [{
		id: '1',
		text: '识别性',
		select:false
	},
	{
		id: '2',
		text: '独特性',
		select:false
	},
	{
		id: '3',
		text: '易记性',
		select:false
	},
	{
		id: '4',
		text: '识别',
		select:false
	},
	{
		id: '5',
		text: '学识',
		select:false
	},
	{
		id: '6',
		text: '持久性',
		select:false
	},
	{
		id: '7',
		text: '易传播',
		select:false
	}
];
new Vue({
	el: '#app',
	data() {
		return {
			itemList:itemData
		}
	},
	mounted() {
	},
	methods: {
	}
})
</script>

<div class="box">
	<div class="item" v-for="(item,i) in itemList" :key="i">
		<span>{{item.text}}</span>
	</div>
</div>

<div class="box">
	<div class="item" v-for="(item,i) in itemList" :key="i" :class="{'item1':index === i}"
		@click="onSelect(i)">
		<span>{{item.text}}</span>
	</div>
</div>

data() {
	return {
		itemList: itemData,
		index: 0,
	}
},
methods:{
    onSelect(i) {
	    this.index = i
    }
}

<div class="item" v-for="(item,i) in itemList" :key="i" :class="{'item1':item.select}"
	@click="onSelect1(i)">
	<span>{{item.text}}</span>
</div>
</div>

data() {
	return {
		itemList: itemData
	}
},
methods:{
    onSelect1(i) {
	    this.itemList[i].select = !this.itemList[i].select;
    }
}

<div class="box">
	<div class="item" v-for="(item,i) in itemList" :key="i" :class="{'item1':item.select}"
		@click="onSelect2(i)">
		<span>{{item.text}}</span>
	</div>
</div>

data() {
	return {
		itemList: itemData,
		chooseData: []
	}
},
methods:{
    onSelect2(i) {
	    let text = this.itemList[i].text;
	    if (!this.itemList[i].select && this.chooseData.length > 2) {
	    	alert("最多只能选择3个")
	   	    return
	    }
	    this.itemList[i].select = !this.itemList[i].select;
	    //选中并且数组小于3则追加
	    if (this.itemList[i].select && this.chooseData.length < 3) {
		    this.chooseData.push(text)
	    }
	    //取消选中
	    if (!this.itemList[i].select) {
		    this.chooseData.splice(this.chooseData.indexOf(text), 1);
	    }
    }
}