資訊專欄INFORMATION COLUMN
摘要：當(dāng)變選中狀態(tài)變更時(shí)對(duì)所有的備選進(jìn)行遍歷主要作用是把所有的項(xiàng)目重置成未選中。該方案主要就是進(jìn)行元素的查詢及更改。多選場(chǎng)景解決方法基本思想是使用數(shù)組保存已經(jīng)選中的項(xiàng)，然后多該數(shù)組進(jìn)行棧操作。
單選多選場(chǎng)景的解決方案集合 場(chǎng)景
經(jīng)常遇到一些類似菜單和導(dǎo)航這樣的頁(yè)面效果需求，基本情況是：
有很多的帶選項(xiàng)，其效果是選中和未選中
有的是多選，有的是單選
解決 1.單選場(chǎng)景因?yàn)槭菃芜x場(chǎng)景所以需要切換
解決方法一設(shè)定每個(gè)備選狀態(tài)為選中和未選中。
當(dāng)變選中狀態(tài)變更時(shí)對(duì)所有的備選進(jìn)行遍歷主要作用是：
把所有的項(xiàng)目重置成未選中。
把選中的那個(gè)項(xiàng)目設(shè)置成選中狀態(tài)。
解決方法二該方法主要是結(jié)合了視覺(jué)和數(shù)據(jù)兩方面的考慮，利用比較的方式動(dòng)態(tài)的設(shè)置class來(lái)呈現(xiàn)效果。
設(shè)置一個(gè)值currentSelected。
該值可以有兩個(gè)狀態(tài)，一是無(wú)值，二是選中的某個(gè)值。
該值應(yīng)該是一個(gè)標(biāo)志值，也可以是個(gè)實(shí)際值。
當(dāng)在選中項(xiàng)目之間切換時(shí)，只是更改currentSelected的值即可。
每次在選中的項(xiàng)目之間切換時(shí)遍歷整個(gè)項(xiàng)目，然后如果狀態(tài)的設(shè)置為選中，不符合的設(shè)置為未選中。
如果currentSelected已經(jīng)存在，那么不進(jìn)行任何操作。
解決方案三該解決方案不用遍歷，基本思想是，把已經(jīng)存儲(chǔ)的相更改狀態(tài)，把選中的線在更改狀態(tài)。
該方案主要就是進(jìn)行el元素的查詢及更改。
基本思想是使用數(shù)組保存已經(jīng)選中的項(xiàng)，然后多該數(shù)組進(jìn)行棧操作。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108999.html
摘要：多選如果已經(jīng)選中了，那就取消選中，如果沒(méi)有，則選中接下來(lái)我們寫一下全選，全取消，反選的實(shí)現(xiàn)。 單選 當(dāng)我們用v-for渲染一組數(shù)據(jù)的時(shí)候，我們可以帶上index以便區(qū)分他們我們這里利用這個(gè)index來(lái)簡(jiǎn)單地實(shí)現(xiàn)單選 {{item}} 首選定義一個(gè)selectedNum,當(dāng)我們點(diǎn)擊item時(shí)，便把這個(gè)selectedNum更改為我們所點(diǎn)擊的item的index，然后每個(gè)item上加入判...
摘要：因時(shí)間不足，能力有限等原因，存在文字闡述不準(zhǔn)及代碼測(cè)試不足等諸多問(wèn)題。因此只限于學(xué)習(xí)范圍，不適用于實(shí)際應(yīng)用。另外各個(gè)組件之件沒(méi)有聯(lián)系，包括字體及配色甚至布局都是相互獨(dú)立的。 1 表單(form)相關(guān) 1.1 輸入框(input) 一個(gè)簡(jiǎn)單的輸入框樣式，簡(jiǎn)捷又不夸張。需要約30行的CSS代碼。 showImg(http://res.42du.cn/up/201803/mxi6rzu3.j...
摘要：另外，題目的選項(xiàng)是數(shù)組的索引，所以不需要用到這個(gè)方法，這個(gè)只是選擇題的答案，根據(jù)索引來(lái)顯示對(duì)應(yīng)的可以用這個(gè)同樣也是根據(jù)碼來(lái)轉(zhuǎn)換的額，應(yīng)當(dāng)對(duì)傳入的值進(jìn)行限制，但是我懶，哈哈。 由于項(xiàng)目是教育類的，所以會(huì)遇到選擇題，單選多選不定項(xiàng)之類的，而從后臺(tái)傳過(guò)來(lái)的答案是1,2,4,8之類的數(shù)字，用來(lái)對(duì)應(yīng)ABCD,采用數(shù)值相加來(lái)解決多選問(wèn)題，比如后臺(tái)傳來(lái)的值是8，就是對(duì)應(yīng)選項(xiàng)D，而穿過(guò)15，就對(duì)應(yīng)1+...
閱讀 3850·2023-04-26 02:07
閱讀 3292·2021-09-22 15:55
閱讀 2610·2021-07-26 23:38
閱讀 3209·2019-08-29 15:16
閱讀 2069·2019-08-29 11:16
閱讀 1829·2019-08-29 11:00
閱讀 3722·2019-08-26 18:36
閱讀 3232·2019-08-26 13:32
