前情提要

好久沒有寫Vue了，略有生疏，這個東西還是得多用。

下午看到一個需求，選擇相冊圖片作為輪播圖顯示。接口返回相冊列表，用戶選一下再扔回去。

直到我看到e.target.className我就知道這個事情不簡單。。

Vue是數(shù)據(jù)驅(qū)動

數(shù)據(jù)驅(qū)動這個是我覺得和jQuery不一樣的地方。

jQuery是點一下，加個class,移個class。

Vue是點一下，數(shù)據(jù)記錄，然后自動通知視圖。

一個是把選中狀態(tài)保存在了DOM，一個是把選中狀態(tài)保存在了js數(shù)據(jù)模型里。

所以在看到了使用Vue然后獲取DOM改class的行為，我及時制止了他。話說你都自己搞了，要Vue干嘛。。。

數(shù)據(jù)驅(qū)動和之前的思想 在一起會怎么樣？

數(shù)據(jù)驅(qū)動是一個數(shù)據(jù)到視圖的過程，如果你只改視圖不改數(shù)據(jù)。那么他在其他的地方刷新了數(shù)據(jù)，就有可能導致視圖不同步。比如寫的時候?qū)懥?，那么讀的時候讀出來的有可能不一樣，為什么會這樣？因為有兩個地方可以改呀，Vue把DOM刪了，新渲染的沒有你寫的狀態(tài)，讀的時候讀個鬼。想想，這一個碰運氣的東西，能好使嗎？

Vue怎么實現(xiàn)這個效果

說了那么多廢話，先上地址吧，傳送門-我寫的DEMO 【具體代碼都在這里】

下面簡單說說三種寫法的思路

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

到此這篇關于vue實現(xiàn)選中效果的文章就介紹到這了,更多相關vue選中效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！