vue div 单选、多选，多选且最多只能选择三个

一、先把准备工作做好

1. css

.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;
}

2. js数据格式

<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>

3. html

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

二、单选

1.效果图

2.html

<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>

 3.js

data() {
	return {
		itemList: itemData,
		index: 0,
	}
},

methods:{
    onSelect(i) {
	    this.index = i
    }
}

三、多选

1.效果图

2.html

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

3.js

data() {
	return {
		itemList: itemData
	}
},

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

 四、多选且最多只能选择三个，选择第四个会出现提示，前面的也可以取消

1.效果图

 

2.html

<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>

3.js

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);
	    }
    }
}

五、以上就是全部类容，希望大家喜欢