前情提要

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

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

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

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

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

jQuery是點(diǎn)一下，加個(gè)class,移個(gè)class。

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

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

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

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

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

Vue怎么實(shí)現(xiàn)這個(gè)效果

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

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

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

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

最新評(píng)論