电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue點擊標簽切換選中及互相排斥操作

瀏覽:5日期:2023-01-06 10:18:16

單身和已婚不能同時選中,不了解保險和已了解保險不能同時選中。

同時各個標簽點擊可以取消選擇

vue點擊標簽切換選中及互相排斥操作

//html <li> <span class='fill-title'>與我相關</span> <div> <van-button v-for='(item, index) in myself' :key='index' @click='checkButton(’myself’, item.id)' : >{{item.title}}</van-button> </div> </li> <li> <span class='fill-title'>標簽</span> <div> <van-button v-for='item in biaoqian' :key='item.id' @click='checkButton(’tag’, item.id)' : >{{item.title}}</van-button> </div> </li>

數據

myself: [ { id: 1,title: '親屬', isFlag: false }, {id: 2,title: '同鄉',isFlag: false}, {id: 3, title: '同學',isFlag: false }, {id: 4,title: '同事', isFlag: false},], biaoqian: [ {id: 1, title: '已婚',type: 1,isFlag: false }, {id: 2,title: '單身',type: 1,isFlag: false }, {id: 3,title: '有娃',isFlag: false }, {id: 4,title: '有房', isFlag: false }, {id: 5,title: '有車',isFlag: false}, {id: 6,title: '不了解保險',isFlag: false,type: 2}, {id: 7,title: '已了解保險',isFlag: false,type: 2} ],

js

//標簽只能選中一個 filterData(arr = [], index) { let val = ''; arr.forEach(item => { if (item.id == index) { item.isFlag = !item.isFlag; val = item.isFlag ? item.title : ''; } else { item.isFlag = false; } }); return val; }, checkButton(val, index) { if (val === 'tag') { let data = []; this.biaoqian.forEach(item => { if (item.id == index) { // a 記錄當前標簽狀態是否選中,為了取消標簽狀態 let a = item.isFlag; item.isFlag = !item.isFlag; if (item.type) { this.biaoqian.forEach(e => { if ((e.type == 1 && index < 3) || (e.type == 2 && index > 5)) { //先把同一個類型的標簽都置為false e.isFlag = false; if (e.id == index) { e.isFlag = a ? false : !e.isFlag; } } }); } } }); let arr = this.biaoqian.filter(item => { return item.isFlag; }); arr.forEach(item => { data.push(item.title); }); this.personItem.labelList = data; } else if (val === 'sex') { this.personItem.sex = this.filterData(this.sexArr, index); } else { this.personItem.relation = this.filterData(this.myself, index); } }

補充知識:vue選中與取消簡單實現

我就廢話不多說了,大家還是直接看代碼吧~

<li v-for='(item,index) in assign' :key='index' @click='selected(item)' :class='{’active’:item.isShow}'>selected(item) {if (!item.isShow) { item.isShow = true; this.selectedList.push(item.id)} else { item.isShow = false; let index = this.selectedList.indexOf(item.id); if (index > -1) { this.selectedList.splice(index, 1); }} },

以上這篇vue點擊標簽切換選中及互相排斥操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 青岛代理记账_青岛李沧代理记账公司_青岛崂山代理记账一个月多少钱_青岛德辉财税事务所官网 | 上海单片机培训|重庆曙海培训分支机构—CortexM3+uC/OS培训班,北京linux培训,Windows驱动开发培训|上海IC版图设计,西安linux培训,北京汽车电子EMC培训,ARM培训,MTK培训,Android培训 | 充气膜专家-气膜馆-PTFE膜结构-ETFE膜结构-商业街膜结构-奥克金鼎 | 氧氮氢联合测定仪-联测仪-氧氮氢元素分析仪-江苏品彦光电 | 蜗轮丝杆升降机-螺旋升降机-丝杠升降机厂家-润驰传动 | 传爱自考网_传爱自学考试网 | 组织研磨机-高通量组织研磨仪-实验室多样品组织研磨机-东方天净 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 耐磨焊丝,堆焊焊丝,耐磨药芯焊丝,碳化钨焊丝-北京耐默公司 | 定时排水阀/排气阀-仪表三通旋塞阀-直角式脉冲电磁阀-永嘉良科阀门有限公司 | 气力输送_输送机械_自动化配料系统_负压吸送_制造主力军江苏高达智能装备有限公司! | 武汉刮刮奖_刮刮卡印刷厂_为企业提供门票印刷_武汉合格证印刷_现金劵代金券印刷制作 - 武汉泽雅印刷有限公司 | 一体化污水处理设备-一体化净水设备-「山东梦之洁水处理」 | NBA直播_NBA直播免费观看直播在线_NBA直播免费高清无插件在线观看-24直播网 | 水篦子|雨篦子|镀锌格栅雨水篦子|不锈钢排水篦子|地下车库水箅子—安平县云航丝网制品厂 | 红立方品牌应急包/急救包加盟,小成本好项目代理_应急/消防/户外用品加盟_应急好项目加盟_新奇特项目招商 - 中红方宁(北京) 供应链有限公司 | 济南ISO9000认证咨询代理公司,ISO9001认证,CMA实验室认证,ISO/TS16949认证,服务体系认证,资产管理体系认证,SC食品生产许可证- 济南创远企业管理咨询有限公司 郑州电线电缆厂家-防火|低压|低烟无卤电缆-河南明星电缆 | 头条搜索极速版下载安装免费新版,头条搜索极速版邀请码怎么填写? - 欧远全 | 直齿驱动-新型回转驱动和回转支承解决方案提供商-不二传动 | 流程管理|流程管理软件|企业流程管理|微宏科技-AlphaFlow_流程管理系统软件服务商 | 99文库_实习生实用的范文资料文库站 | PCB接线端子_栅板式端子_线路板连接器_端子排生产厂家-置恒电气 喷码机,激光喷码打码机,鸡蛋打码机,手持打码机,自动喷码机,一物一码防伪溯源-恒欣瑞达有限公司 假肢-假肢价格-假肢厂家-河南假肢-郑州市力康假肢矫形器有限公司 | 除尘器布袋骨架,除尘器滤袋,除尘器骨架,电磁脉冲阀膜片,卸灰阀,螺旋输送机-泊头市天润环保机械设备有限公司 | 超高频感应加热设备_高频感应电源厂家_CCD视觉检测设备_振动盘视觉检测设备_深圳雨滴科技-深圳市雨滴科技有限公司 | 数控车床-立式加工中心-多功能机床-小型车床-山东临沂金星机床有限公司 | 沙盘模型公司_沙盘模型制作公司_建筑模型公司_工业机械模型制作厂家 | 学生作文网_中小学生作文大全与写作指导 | 123悬赏网_发布悬赏任务_广告任务平台 | 工业电炉,台车式电炉_厂家-淄博申华工业电炉有限公司 | 槽钢冲孔机,槽钢三面冲,带钢冲孔机-山东兴田阳光智能装备股份有限公司 | 拉伸膜,PE缠绕膜,打包带,封箱胶带,包装膜厂家-东莞宏展包装 | 污水处理设备,一体化泵站,一体化净水设备-「梦之洁环保设备厂家」 | 拖鞋定制厂家-品牌拖鞋代加工厂-振扬实业中国高端拖鞋大型制造商 | 锂离子电池厂家-山东中信迪生电源 | 游动电流仪-流通式浊度分析仪-杰普仪器(上海)有限公司 | 恒温恒湿试验箱厂家-高低温试验箱维修价格_东莞环仪仪器_东莞环仪仪器 | LED太阳能中国结|发光红灯笼|灯杆造型灯|节日灯|太阳能灯笼|LED路灯杆装饰造型灯-北京中海轩光电 | 打包箱房_集成房屋-山东佳一集成房屋有限公司 | 全自动定氮仪-半自动凯氏定氮仪厂家-祎鸿仪器 | 康明斯发电机,上柴柴油发电机,玉柴柴油发电机组_海南重康电力官网 | 算命免费_生辰八字_免费在线算命 - 卜算子算命网 | 电梯乘运质量测试仪_电梯安全评估测试仪-武汉懿之刻 |