vue實現選中效果

前情提要

很久沒有寫Vue了，略有生疏，這個東西仍是得多用。
下午看到一個需求，選擇相冊圖片做爲輪播圖顯示。接口返回相冊列表，用戶選一下再扔回去。
直到我看到e.target.className我就知道這個事情不簡單。。

Vue是數據驅動

數據驅動這個是我以爲和jQuery不同的地方。
jQuery是點一下，加個class,移個class。
Vue是點一下，數據記錄，而後自動通知視圖。
一個是把選中狀態保存在了DOM，一個是把選中狀態保存在了js數據模型裏。
因此在看到了使用Vue而後獲取DOM改class的行爲，我及時制止了他。話說你都本身搞了，要Vue幹嗎。。。

數據驅動和以前的思想 在一塊兒會怎麼樣？

數據驅動是一個數據到視圖的過程，若是你只改視圖不改數據。那麼他在其餘的地方刷新了數據，就有可能致使視圖不一樣步。好比寫的時候寫了，那麼讀的時候讀出來的有可能不同，爲何會這樣？由於有兩個地方能夠改呀，Vue把DOM刪了，新渲染的沒有你寫的狀態，讀的時候讀個鬼。想一想，這一個碰運氣的東西，能好使嗎？

Vue怎麼實現這個效果

說了那麼多廢話，先上地址吧，傳送門-我寫的DEMO
下面簡單說說三種寫法的思路

1. 選中的id作成一個數組，多維護一個隊列。:class="{selected: ~checkSelect(item.id)}"渲染的時候去判斷數組裏面有那個id沒有。
2. 選中的id作成一個對象，多維護一個對象。:class="{selected: selectList[item.id]}"和前一個相比對象的話，id做爲key查找起來方便了不少。這裏要注意的是.$set，劃重點要考的。
3. 直接改原對象，多加一個參數。這個不怎麼推薦。

在我寫完代碼，寫文章的時候，需求就變了。難受。。。。去改代碼。。。。
在我寫完代碼，寫文章的時候，需求就變了。難受。。。。去改代碼。。。。
在我寫完代碼，寫文章的時候，需求就變了。難受。。。。去改代碼。。。。