? ? ? ?咳咳。。。如標(biāo)題所講，看起來好簡單的樣子，但是這個需求在一個Vue架構(gòu)的中大型項(xiàng)目中實(shí)現(xiàn)起來又貌似不是想象中的那么容易。以下是我的思路，愚見求各位大佬指教。

分析：

1、問題就是將input radio單選框改造成單擊可以取消其選中狀態(tài)

2、單純的對input radio進(jìn)行js控制行不通，因?yàn)閞adio是通過v-repeat出來的，有很多個，如果每一個都去獲取元素的話，執(zhí)行效率太低，failed

3、給radio添加click事件，判斷checked屬性，如果為true則取消checked，但由于radio每次click都會將自己的checked置為true（Vue的數(shù)據(jù)雙向綁定速度也是很快的），數(shù)據(jù)賦值速度之快以至于每次click獲取到的checked值都為true，failed

4、當(dāng)一個radio從未選中到選中狀態(tài)，會先觸發(fā)click再觸發(fā)change事件，因此只要在click事件判斷當(dāng)前radio是否觸發(fā)了change事件，如果沒觸發(fā)change事件說明當(dāng)前radio是選中狀態(tài)，此時(shí)則把該radio的checked置為false，就可以實(shí)現(xiàn)單擊選中狀態(tài)的radio取消其選中狀態(tài)

5、以上第4點(diǎn)有一個邏輯漏洞，因?yàn)閏lick先觸發(fā)，change后觸發(fā)，那如何在click中判斷當(dāng)前radio是否觸發(fā)了change呢？需要將click事件中的js判斷邏輯手動放到change觸發(fā)之后執(zhí)行，則將click中的邏輯放在setTimeout延遲0秒，手動將這段邏輯執(zhí)行排在了change事件隊(duì)列的后面

6、多說無益，打碼：

7、以上代碼中的changed就作為判斷依據(jù)，因?yàn)檫@只是改造了原生的radio，所以是不會污染原來綁定的數(shù)據(jù)，可以放心去擼后面的碼

8、下一步優(yōu)化就是把這段邏輯封裝到Vue中的directive作為公共radio組件,見以下代碼

9、組件分析：沒什么好說的，就是單純的把第6點(diǎn)的邏輯封裝在了一個公共的directive組件中（無奈，因?yàn)槭褂玫牡氖荲ue1，這個版本暫時(shí)還沒有虛擬DOM，其實(shí)更好的做法是把它做成一個虛擬DOM）

10、Vue中使用這個公共組件，只需要加'v-radio'屬性即可