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)' : >{{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)' : >{{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選中與取消簡(jiǎn)單實(shí)現(xiàn)
我就廢話不多說(shuō)了,大家還是直接看代碼吧~
<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)簽切換選中及互相排斥操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼2. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題3. python 浮點(diǎn)數(shù)四舍五入需要注意的地方4. JAMon(Java Application Monitor)備忘記5. Springboot 全局日期格式化處理的實(shí)現(xiàn)6. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)7. python開(kāi)發(fā)一款翻譯工具8. 利用CSS制作3D動(dòng)畫(huà)9. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法10. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能(保存目錄改進(jìn))
