vue點(diǎn)擊標(biāo)簽切換選中及互相排斥操作
單身和已婚不能同時(shí)選中,不了解保險(xiǎn)和已了解保險(xiǎn)不能同時(shí)選中。
同時(shí)各個(gè)標(biāo)簽點(diǎn)擊可以取消選擇
//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)" :class="item.isFlag ? 'current' : ''" >{{item.title}}</van-button> </div> </li> <li> <span class="fill-title">標(biāo)簽</span> <div> <van-button v-for="item in biaoqian" :key="item.id" @click="checkButton('tag', item.id)" :class="item.isFlag ? 'current' : ''" >{{item.title}}</van-button> </div> </li>
數(shù)據(jù)
myself: [ { id: 1,title: "親屬", isFlag: false }, {id: 2,title: "同鄉(xiāng)",isFlag: false}, {id: 3, title: "同學(xué)",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: "不了解保險(xiǎn)",isFlag: false,type: 2}, {id: 7,title: "已了解保險(xiǎn)",isFlag: false,type: 2} ],
js
//標(biāo)簽只能選中一個(gè) 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 記錄當(dāng)前標(biāo)簽狀態(tài)是否選中,為了取消標(biāo)簽狀態(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)) { //先把同一個(gè)類型的標(biāo)簽都置為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); } }
補(bǔ)充知識(shí):vue選中與取消簡單實(shí)現(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點(diǎn)擊標(biāo)簽切換選中及互相排斥操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
一文詳解Vue如何整合Echarts實(shí)現(xiàn)可視化界面
ECharts,縮寫來自Enterprise Charts,商業(yè)級數(shù)據(jù)圖表,一個(gè)純Javascript的圖表庫,可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上。本文將在Vue中整合Echarts實(shí)現(xiàn)可視化界面,感興趣的可以了解一下2022-04-04tomcat部署前端vue項(xiàng)目步驟(項(xiàng)目上線具體操作)
在實(shí)際開發(fā)中,我們經(jīng)常會(huì)遇到將Vue項(xiàng)目部署到Tomcat服務(wù)器上的需求,下面這篇文章主要給大家介紹了關(guān)于tomcat部署前端vue項(xiàng)目(項(xiàng)目上線具體操作)的相關(guān)資料,需要的朋友可以參考下2024-07-07vue-cli 3.x配置跨域代理的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-cli 3.x配置跨域代理的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04VUE解決微信簽名及SPA微信invalid signature問題(完美處理)
這篇文章主要介紹了VUE解決微信簽名及SPA微信invalid signature問題(完美處理),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03Vue Element UI 中 el-table 樹形數(shù)據(jù) 
這篇文章主要介紹了Vue Element UI 中 el-table 樹形數(shù)據(jù) tree-props 多層級使用避坑指南,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01vue jsx 使用指南及vue.js 使用jsx語法的方法
這篇文章主要介紹了vue jsx 使用指南及vue.js 使用jsx語法的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11