vue實現選中效果

2021-09-13 12:26:33 字數 1073 閱讀 3627

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

下午看到乙個需求,選擇相簿作為輪播圖顯示。介面返回相簿列表,使用者選一下再扔回去。

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

資料驅動這個是我覺得和jquery不一樣的地方。

jquery是點一下,加個class,移個class

vue是點一下,資料記錄,然後自動通知檢視。

乙個是把選中狀態儲存在了dom,乙個是把選中狀態儲存在了js資料模型裡。

所以在看到了使用vue然後獲取domclass的行為,我及時制止了他。話說你都自己搞了,要vue幹嘛。。。

資料驅動是乙個資料到檢視的過程,如果你只改檢視不改資料。那麼他在其他的地方重新整理了資料,就有可能導致檢視不同步。比如寫的時候寫了,那麼讀的時候讀出來的有可能不一樣,為什麼會這樣?因為有兩個地方可以改呀,vue把dom刪了,新渲染的沒有你寫的狀態,讀的時候讀個鬼。想想,這乙個碰運氣的東西,能好使嗎?

說了那麼多廢話,先上位址吧,傳送門-我寫的demo

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

選中的id做成乙個陣列,多維護乙個佇列。:class=""渲染的時候去判斷陣列裡面有那個id沒有。

選中的id做成乙個物件,多維護乙個物件。:class=""和前乙個相比物件的話,id作為key查詢起來方便了很多。這裡要注意的是.$set,劃重點要考的。

直接改原物件,多加乙個引數。這個不怎麼推薦。

在我寫完**,寫文章的時候,需求就變了。難受。。。。去改**。。。。

在我寫完**,寫文章的時候,需求就變了。難受。。。。去改**。。。。

在我寫完**,寫文章的時候,需求就變了。難受。。。。去改**。。。。

vue實現輪播效果

效果如下 不好意思,圖有點大 功能 點選左側,右側出現相應的 同時左側邊框變顏色。for leftimg,index in leftimgs key index for leftimg,index in leftimgs key index c 如果左側不是,而是文字的話 可以把 width 130...

vue實現動態星空效果

在此之前,要先安裝 less less loader webpack.base.conf.js index.html doctype html utf 8 viewport content width device width,initial scale 1.0 vue notes title bo...

vue實現標籤雲效果

最近想給自己的部落格上加上乙個3d標籤雲的效果,用來表示自己部落格文章的分組,網上找到了canvas實現的,還有a元素實現的解析3d標籤雲,我想讓標籤可以選擇和點選,又不想在標籤數量較多時操作a標籤導致效能問題,於是svg就成了乙個不錯的選擇。貼上 text a svg div 在模板中,借用指令v...