在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 想用vue實(shí)現(xiàn)商品規(guī)格的顏色排他，想要三三對(duì)應(yīng)排他

想用vue實(shí)現(xiàn)商品規(guī)格的顏色排他，想要三三對(duì)應(yīng)排他

后臺(tái)對(duì)象是這樣的圖片描述

我想實(shí)現(xiàn)這種效果，這是用jquery事件監(jiān)聽寫出來的圖片描述
但是 在vue是顯示 所有個(gè)span進(jìn)行排他，只能實(shí)現(xiàn)如下效果圖片描述
代碼如圖圖片描述
想了好久 沒想出一個(gè)好的方法，求大神幫忙

目前是這樣的圖片描述
圖片描述 但效果是這樣的，可以實(shí)現(xiàn)多選 但沒有實(shí)現(xiàn)排他圖片描述

回答
編輯回答
艷骨

兩種方案：
（1）你重新組裝后臺(tái)返回的數(shù)據(jù)，組裝成：
內(nèi)存：[{name: '8G', active: false}, {name: '16G', active: false}, ....]
的形式。
然后@click="changeItem(items, k)"; 方法：changeItem(items, item) { 前面要循環(huán)items, 去掉active；item.active = !item.active }

（2）定義三個(gè)變量，分別是selected內(nèi)存， selected顏色， selected屏幕，
然后@click="selectItem(index, k)"; 方法： selectItem(key, item) { if (key === '內(nèi)存') { selected內(nèi)存 = item;} else if...... }
修改:class="{active: (index === '內(nèi)存' && k === selected內(nèi)存) || (index === '顏色' && k === selected顏色) || ....}"

做好用第一種方法

2018年8月7日 05:08