uni-app 实现列表数据选中多个功能

<view :class="['list',{'selected':groupIds.includes(item.ssTid)}]"  v-for="(item, index) of list.data" :key="index" @click="handleToSelect(item.ssTid)">
　　<view class="ev"><view>商品名称:</view><view>{{ item.sgName || '-' }}</view></view>
</view>

 

// 选中的样式

.selected{

　　border:2px solid red;

}

 

<script>

　　data() {

　　　　return: {

　　　　　　groupIds: []  // 选中的数据数组

　　　　}

　　}

</script>

 

// 点击选择
handleToSelect(id){
　　let _this = this;
　　let arr = _this.groupIds;
　　if(arr.includes(id)){
　　　　//includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
　　　　let index = arr.indexOf(id); // 判断数组中是否有选中的id,如果有则去掉
　　　　if(index > -1){
　　　　　　arr.splice(index,1)
　　　　}
　　}else{
　　　　_this.groupIds.push(id)
　　}
},