前情提要

好久沒有寫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. 直接改原物件，多加一個引數。這個不怎麼推薦。

到此這篇關於vue實現選中效果的文章就介紹到這了,更多相關vue選中效果內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！