vue點擊標簽切換選中及互相排斥操作
更新時間:2020年07月17日 11:00:34 作者:zz2511lj
這篇文章主要介紹了vue點擊標簽切換選中及互相排斥操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
單身和已婚不能同時選中,不了解保險和已了解保險不能同時選中。
同時各個標簽點擊可以取消選擇
//html <li> <span class="fill-title">與我相關</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">標簽</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: "同學",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點擊標簽切換選中及互相排斥操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
一文詳解Vue如何整合Echarts實現(xiàn)可視化界面
ECharts,縮寫來自Enterprise Charts,商業(yè)級數(shù)據(jù)圖表,一個純Javascript的圖表庫,可以流暢的運行在PC和移動設備上。本文將在Vue中整合Echarts實現(xiàn)可視化界面,感興趣的可以了解一下2022-04-04VUE解決微信簽名及SPA微信invalid signature問題(完美處理)
這篇文章主要介紹了VUE解決微信簽名及SPA微信invalid signature問題(完美處理),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03Vue Element UI 中 el-table 樹形數(shù)據(jù) 
這篇文章主要介紹了Vue Element UI 中 el-table 樹形數(shù)據(jù) tree-props 多層級使用避坑指南,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01vue jsx 使用指南及vue.js 使用jsx語法的方法
這篇文章主要介紹了vue jsx 使用指南及vue.js 使用jsx語法的方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-11-11