uni-app实现单选、多选改变样式

单选

 <!-- 单选 --><view class="company-item" :class="{'active': isChange == index}"  v-for="(item, index) in list" :key="index" @click="clickBtn(index)">{{item}}</view>

 isChange:'-1', //单选list: [],   //接口获取到的数组// 判断 当前index 是否与 ischange 相等，不相等择改变背景为红色（代表选中），再次点击取消clickBtn(index){// 单选if(index!=this.isChange){this.isChange = index;}else{// this.isChange = -1;    //不注释则可以点击取消，注释之后点击就不再取消}},

多选

 <!-- 多选 --><view class="skill-item" :class="{'active': isChange.indexOf(index)!=-1}"  v-for="(item, index) in list" :key="index" @click="clickBtn(index)"> {{item}}</view>

 isChange:[],  //多选list: [],  //接口获取到的数组clickBtn(index){// 多选if (this.isChange.indexOf(index) == -1) {if(this.isChange.length == 3){uni.showToast({title:'最多选择三项',icon:'none'})}else{this.isChange.push(index);//选中添加到数组里}} else {this.isChange.splice(this.isChange.indexOf(index), 1); //取消选中}let list2 =  []for(let index in this.isChange){list2.push(this.list[this.isChange[index]])}},

样式

.company-item{width:200rpx;height:50rpx;border:2rpx solid #555;border-radius:10rpx;font-size:30rpx;color:#555;text-align: center;line-height: 50rpx;
}
.active{border:2rpx solid #DD524D;color: #DD524D;
}

uni-app实现单选、多选改变样式相关推荐

微信小程序的多选改变样式_微信小程序button选中改样式-实现单选/多选
小程序实现多button单选/多选红色为选中状态单选多选 ①wxss /* pages/button-select/button-select.wxss */ .button_container ...
微信小程序的多选改变样式_微信小程序radio的样式修改
效果图代码 html部分 {{item.text}} css部分 radio .wx-radio-input.wx-radio-input-checked { border-color: #cc00 ...
input复选框改变样式
今天有人问我input复选框要怎么改变样式,查了一下,特整理下来: <input type="checkbox">input[type="checkbox&q ...
使用计算属性实现购物车功能效果（商品数量增减、单选多选计算金额和总价，）
使用计算属性实现购物车效果(商品数量增减.单选多选计算金额和总价,) 涉及知识: Vue 基本指令 Vue 计算属性使用 Vue 的基础语法知识,包括插值表达式与数据绑定.常用指令.计算属性等实现购 ...
大学必考计算机软件cad,大学CAD考试试题单选多选作图操作题.doc
大学CAD考试试题单选多选作图操作题.doc -----测绘cc整理? 一.单项选择题(每题1分,共20分) 1.重新执行上一?个命令的最快?方法是:A (A) (B) (C) (D) (A) (B) ...
Java web对试卷进行单选多选答题进行打分_知识竞赛答题活动小程序
想扫码体验的同学,可以直接移步这篇文章了解下小肥羊:如何搭建一套知识竞赛答题活动小程序zhuanlan.zhihu.com 前言:这几天在公司闲闲无事,恰好团队有通过在线考试的需求,于是自发撸了一 ...
六安电大计算机考试真题及答案,电大dreamweaver网页设计单选多选判断填空试题库完整.pdf...
电大 dreamweaver 网页设计单选多选判断填空题库 1. 利用 a:link 设置的样式属于( B ). A. 类样式 B. 标签样式 C. 高级样式 D. 层叠样式 2. 以下选项 ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
选择屏幕——按钮、单选复选框
12.6. 按钮.单选复选框.下拉框的FunCode 如果复选框与单选按钮没有设置Function Code,则它们就会像普通的输入框一样,即使状态发生了改变,也不会触发PAI事件对话屏幕中 ...

uni-app实现单选、多选改变样式

单选

多选

样式

uni-app实现单选、多选改变样式相关推荐

最新文章

热门文章