vue实现div单选多选功能

vue实现div单选多选功能

单选

单选：
多选：

单选功能

DOM层：

 <div class="labeloption" :class="{checked:ageActive == 11}"  @click="changeStatus(11)">0-16岁</div>
 <div class="labeloption" :class="{checked:ageActive == 12}"  @click="changeStatus(12)">17-25岁</div>
 <div class="labeloption" :class="{checked:ageActive == 13}"  @click="changeStatus(13)">26-35岁</div>
 <div class="labeloption" :class="{checked:ageActive == 14}"  @click="changeStatus(14)">36-45岁</div>
 <div class="labeloption" :class="{checked:ageActive == 15}"  @click="changeStatus(15)">46-55岁</div>
 <div class="labeloption" :class="{checked:ageActive == 16}"  @click="changeStatus(16)">55岁以上</div>

js层：

new Vue({
	  el: '#home',
	  data() {
	  	return {
	  		ageActive:11   //初始选中状态的元素id
	  	  }
	  	},
		methods: {
			changeStatus(number){
					this.ageActive = number;
			}
		}
	  })

单选功能主要利用的是vue的数据驱动原则改变当前dom元素的状态

多选功能

DOM层：

<div class="labeloption checked" @click="changeStatus($event,11)">0-16岁</div>
<div class="labeloption" @click="changeStatus($event,12)">17-25岁</div>
<div class="labeloption" @click="changeStatus($event,13)">26-35岁</div>
<div class="labeloption" @click="changeStatus($event,14)">36-45岁</div>
<div class="labeloption" @click="changeStatus($event,15)">46-55岁</div>
<div class="labeloption" @click="changeStatus($event,16)">55岁以上</div>

js层：

new Vue({
	  el: '#home',
	  data() {
		methods: {
			changeStatus(e,number){
				if (e.target.className.indexOf("checked") == -1) {
					e.target.className = "labeloption checked"; //选中div样式
				} else {
					e.target.className = "labeloption";//未选中div样式
				}
		}
	  })

多选功能于单选功能不同，没有用到vue的数据驱动原则，单纯的操作dom元素，跟vue没啥关系。