首页 > 其他分享 >uniapp单选全选

uniapp单选全选

时间:2022-09-20 10:22:34浏览次数:74  
标签:uniapp false allKLength item length 全选 单选 allChek shows

<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

相关文章

  • uniapp蓝牙多设备连接
    博客园断更快一年了终于想起来我还有个博客,也主要是最近工作上面也没有什么想记录的,不过最近倒是搞了个有意思的功能项目 请注意:此文章禁止转载,抄袭,这是对我个人知识产......
  • uniapp配置网络请求
    网络请求自己配置的uni网络请求 由于平台的限制,小程序项目中不支持axios,而且原生的uni.request()API功能较为简单,不支持拦截器等全局定制的功能。因......
  • 基于HBuilderX+UniApp+ThorUI的手机端前端开发处理
    现在的很多程序应用,基本上都是需要多端覆盖,因此基于一个WebAPI的后端接口,来构建多端应用,如微信、H5、APP、WInForm、BS的Web管理端等都是常见的应用。本篇随笔概括性的介......
  • uniappuviewvue3开发微信小程序(二)
    我们使用HBuilderX编辑器创建完成项目后,然后登陆https://mp.weixin.qq.com/用自己的微信号码扫码登录小程序,找到开发者id,然后黏贴到我们项目manifest.json-微信小程序设置......
  • 用qt designer"设计"出带圆点的单选菜单项
    先放张图,也许我们要的是右边的样子,而QT设计器设计出来是左边的样子,那怎么样稍做修改一下,实现右边的效果呢?另外,据说,在很久以前,QT实际上是可以设计出右边的样子的,但......
  • UNIApp
    uniapp打包app后页面顶部被遮挡的问题 打开应用的manifest.json文件,打开源码视图,配置mainfest.json来关闭沉浸式。......
  • uniapp 小程序 APP 退出应用
    APP端:if(uni.getSystemInfoSync().platform=='ios'){plus.ios.import("UIApplication").sharedApplication().performSelector("exit")}elseif(uni.getSyste......
  • 直播平台源代码,uniapp中样式的学习及如何使用scss和字体图标
    直播平台源代码,uniapp中样式的学习及如何使用scss和字体图标uni-app中的样式rpx即响应式px,一种根据屏幕自适应动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏......
  • uniapp请求到数据却渲染不到页面
    是this指向问题,如果success写成普通函数的形式,那么this指向success自身,应该指向对象自身的uni.request({url:‘http://localhost:3000/api/search,method:‘get......
  • uniApp调用科大讯飞语音识别离线包
    之前在uniapp有语音识别的需求,hbuilderX自带可以方便配置百度语音识别的插件,但由于需求进一步提高-无网络环境,便转向了唯一实现了离线语音识别的科大讯飞...(话说无网络不......