首先看一下html列表:
第一步:写html结构时,需要将选中的状态写好,当div的class是checked-item时,是选中的状态,所以我们只需要判断选中的时候,class带有checked-item即可;
第二步:获取当前选中的id,@click="checkGroup(item.id)
第三步:在选中的事件checkGroup中做处理:点击将id存放在数组groupIds中;
includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效
如果包含此id(选中此id)则用arr.indexOf(id)检测,此id的位置,然后利用arr.splice(index,1)将此id去掉。
第四步:在判断class时,运用数组的includes的方法,判断是否包含这个id,groupIds.includes(item.id)。
<div :class="['class-item',{'checked-item':groupIds.includes(item.id)}]" v-for="(item,index) in groupList" :key="index" @click="checkGroup(item.id)">
<div class="info fl">
<p class="name ellipsis-line1">{
{item.groupName}}</p>