所有选项的值如下:
list:[ {id:1,title:'JSK'}, {id:2,title:'OP'}, {id:3,title:'SK'}, {id:4,title:'衬衫'}, {id:5,title:'鞋子'}, {id:6,title:'包包'}, {id:7,title:'小物'} ]思路:
在点击选项的时候,可以对list进行操作,将它添加一个checked属性,值为false或者true,进而添加或删除选中的class,html如下:
<div class="hxz-multiple-select"> <div> <a v-for="(item,index) in list" :key="index" :class="{'checked':item.checked}" tapmode @click="clickMultiplePopItem(item,index)">{{item.title}}</a> </div> <a class="confirm" @click="onSelectMultiplePop()">确定</a> </div>重点在::class="{'checked':item.checked}",点击的时候将每条item传过去,对它进行操作,js代码如下:
//多选单个点击 clickMultiplePopItem(item,index){ if(item.checked){ Vue.set(item,'checked',false); }else{ Vue.set(item,'checked',true); } }这里要说明:为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法。