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

您的位置:首頁技術(shù)文章
文章詳情頁

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

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

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

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

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

//html <li> <span class='fill-title'>與我相關(guān)</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>

數(shù)據(jù)

myself: [ { id: 1,title: '親屬', isFlag: false }, {id: 2,title: '同鄉(xiāng)',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 記錄當前標簽狀態(tài)是否選中,為了取消標簽狀態(tài) 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選中與取消簡單實現(xiàn)

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

<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點擊標簽切換選中及互相排斥操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。

標簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 烟台螺纹,烟台H型钢,烟台钢材,烟台角钢-烟台市正丰金属材料有限公司 | 滑板场地施工_极限运动场地设计_滑板公园建造_盐城天人极限运动场地建设有限公司 | 保定市泰宏机械制造厂-河北铸件厂-铸造厂-铸件加工-河北大件加工 | 电抗器-能曼电气-电抗器专业制造商 | 电镀标牌_电铸标牌_金属标贴_不锈钢标牌厂家_深圳市宝利丰精密科技有限公司 | 嘉兴恒升声级计-湖南衡仪声级计-杭州爱华多功能声级计-上海邦沃仪器设备有限公司 | 皮带式输送机械|链板式输送机|不锈钢输送机|网带输送机械设备——青岛鸿儒机械有限公司 | 激光内雕_led玻璃_发光玻璃_内雕玻璃_导光玻璃-石家庄明晨三维科技有限公司 激光内雕-内雕玻璃-发光玻璃 | 手术室净化厂家-成都做医院净化工程的公司-四川华锐-15年特殊科室建设经验 | 超高频感应加热设备_高频感应电源厂家_CCD视觉检测设备_振动盘视觉检测设备_深圳雨滴科技-深圳市雨滴科技有限公司 | 基本型顶空进样器-全自动热脱附解吸仪价格-AutoHS全模式-成都科林分析技术有限公司 | 马尔表面粗糙度仪-MAHR-T500Hommel-Mitutoyo粗糙度仪-笃挚仪器 | 气力输送设备_料封泵_仓泵_散装机_气化板_压力释放阀-河南锐驰机械设备有限公司 | 私人别墅家庭影院系统_家庭影院音响_家庭影院装修设计公司-邦牛影音 | 食品无尘净化车间,食品罐装净化车间,净化车间配套风淋室-青岛旭恒洁净技术有限公司 | 无缝方管|无缝矩形管|无缝方矩管|无锡方管厂家 | 黑龙江京科脑康医院-哈尔滨精神病医院哪家好_哈尔滨精神科医院排名_黑龙江精神心理病专科医院 | 餐饮小吃技术培训-火锅串串香培训「何小胖培训」_成都点石成金[官网] | 西安展台设计搭建_西安活动策划公司_西安会议会场布置_西安展厅设计西安旭阳展览展示 | 99文库_实习生实用的范文资料文库站 | 无锡网站建设-做网站-建网站-网页设计制作-阿凡达建站公司 | SEO网站优化,关键词排名优化,苏州网站推广-江苏森歌网络 | 北京开业庆典策划-年会活动策划公司-舞龙舞狮团大鼓表演-北京盛乾龙狮鼓乐礼仪庆典策划公司 | IIS7站长之家-站长工具-爱网站请使用IIS7站长综合查询工具,中国站长【WWW.IIS7.COM】 | 304不锈钢无缝管_不锈钢管厂家 - 隆达钢业集团有限公司 | 消防设施操作员考试报名时间,报名入口,报考条件 | 书法培训-高考书法艺考培训班-山东艺霖书法培训凭实力挺进央美 | 防爆电机-高压防爆电机-ybx4电动机厂家-河南省南洋防爆电机有限公司 | 中国产业发展研究网 - 提供行业研究报告 可行性研究报告 投资咨询 市场调研服务 | 泥沙分离_泥沙分离设备_泥砂分离机_洛阳隆中重工机械有限公司 | 【法利莱住人集装箱厂家】—活动集装箱房,集装箱租赁_大品牌,更放心 | 吊篮式|移动式冷热冲击试验箱-二槽冷热冲击试验箱-广东科宝 | 盘式曝气器-微孔曝气器-管式曝气器-曝气盘-斜管填料 | 郑州市前程水处理有限公司 | 镀锌方管,无缝方管,伸缩套管,方矩管_山东重鑫致胜金属制品有限公司 | 合肥展厅设计-安徽展台设计-合肥展览公司-安徽奥美展览工程有限公司 | 聚合氯化铝厂家-聚合氯化铝铁价格-河南洁康环保科技 | 带锯机|木工带锯机圆木推台锯|跑车带锯机|河北茂业机械制造有限公司| | ALC墙板_ALC轻质隔墙板_隔音防火墙板_轻质隔墙材料-湖北博悦佳 | 空压机网_《压缩机》杂志 | 河南不锈钢水箱_地埋水箱_镀锌板水箱_消防水箱厂家-河南联固供水设备有限公司 | 石家庄律师_石家庄刑事辩护律师_石家庄取保候审-河北万垚律师事务所 |