<view> <view class="cssss" v-for="(item,index) in hondianCss" :key="index"> <view class="hondian" :class="item.shows?'activity':''" @click="jkasdw(item,index)"></view> <view>{{item.title}}</view> </view> <view class="cssss"> <view class="hondian" :class="allChek?'activity':''" @click="allJkasdw"></view> <view>全选</view> </view> </view> data() { return { hondianCss:[ {shows:false,title:'数据1'}, {shows:false,title:'数据2'}, {shows:false,title:'数据3'}, {shows:false,title:'数据4'}, ], allKLength:0, allKLasd:[], allChek:false, } }, methods: { jkasdw(item,index){ item.shows = !item.shows this.allKLength = item.length if(item.shows==true){ this.allKLasd.push(item) if(this.allKLasd.length==this.hondianCss.length){ this.allChek = true }else{ this.allChek = false } }else{ this.allKLasd.splice(index,1) if(this.allKLasd.length !== this.hondianCss.length){ this.allChek = false }else{ this.allChek = true } } }, allJkasdw(){ let hondianCsss = this.hondianCss if(this.allKLength==this.hondianCss.length){ hondianCsss.map((item,index)=>{ item.shows = false this.allChek = false }) this.allKLength = 0 }else{ hondianCsss.map((item,index)=>{ item.shows = true this.allChek = true }) this.allKLength = hondianCsss.length } }, } .cssss{display: flex;} .hondian{ border-radius: 50%; width: 40rpx; height: 40rpx; border: 1px red solid; } .activity{background: red;}
标签:uniapp,false,allKLength,item,length,全选,单选,allChek,shows From: https://www.cnblogs.com/chujing202/p/16710132.html