vue實現選中效果

yanest 發布于2019-08-29 16:08 / 2987人閱讀

摘要：想想，這一個碰運氣的東西，能好使嗎怎么實現這個效果說了那么多廢話，先上地址吧，傳送門我寫的下面簡單說說三種寫法的思路選中的做成一個數組，多維護一個隊列。選中的做成一個對象，多維護一個對象。

前情提要

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

Vue是數據驅動

數據驅動這個是我覺得和jQuery不一樣的地方。
jQuery是點一下，加個class,移個class。
Vue是點一下，數據記錄，然后自動通知視圖。
一個是把選中狀態保存在了DOM，一個是把選中狀態保存在了js數據模型里。
所以在看到了使用Vue然后獲取DOM改class的行為，我及時制止了他。話說你都自己搞了，要Vue干嘛。。。

數據驅動和之前的思想在一起會怎么樣？

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

Vue怎么實現這個效果

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

選中的id做成一個數組，多維護一個隊列。:class="{selected: ~checkSelect(item.id)}"渲染的時候去判斷數組里面有那個id沒有。

選中的id做成一個對象，多維護一個對象。:class="{selected: selectList[item.id]}"和前一個相比對象的話，id作為key查找起來方便了很多。這里要注意的是.$set，劃重點要考的。

直接改原對象，多加一個參數。這個不怎么推薦。

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

云服務器 GPU云服務器點擊選中效果 html表格選中效果 VUE實現webrtc Vue實現分頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113545.html

vue實現選中效果

摘要：想想，這一個碰運氣的東西，能好使嗎怎么實現這個效果說了那么多廢話，先上地址吧，傳送門我寫的下面簡單說說三種寫法的思路選中的做成一個數組，多維護一個隊列。選中的做成一個對象，多維護一個對象。前情提要好久沒有寫Vue了，略有生疏，這個東西還是得多用。下午看到一個需求，選擇相冊圖片作為輪播圖顯示。接口返回相冊列表，用戶選一下再扔回去。直到我看到e.target.className我就知道...

jubincn 2019-08-02 11:01 評論0 收藏0
使用 Drag and Drop 給Web應用提升交互體驗

摘要：注意點在鼠標操作拖放期間，有一些事件可能觸發多次，比如和。可拖拽元素，建議使用，設定可拖拽元素的鼠標游標，提升交互。在中使用拖拽中使用可以直接綁定到組件上。什么是 Drag and Drop （拖放）？簡單來說，HTML5 提供了 Drag and Drop API，允許用戶用鼠標選中一個可拖動元素，移動鼠標拖放到一個可放置到元素的過程。我相信每個人都或多或少接觸過拖放，比如瀏覽...

legendmohe 2019-08-02 12:03 評論0 收藏0
網頁版模仿Excel

摘要：鼠標按下拖拽多選單元格這個是本唯一的亮點了個人認為。這樣做的結果是頁面非常卡，因為鼠標移動過程會多次觸發鼠標移動事件，會多次進行單元格元素循環遍歷。網頁版模仿Excel 最近公司閑的dan疼，非要模仿Excel做一個網頁版的Excel，剛開始聽說要做這么一個東西的時候瞬間覺得公司領導高(sang)瞻(xin)遠(bing)矚(kuang)，只能頭鐵的接下了，那就開始干。其實主要目的是...

james 2019-08-26 11:49 評論0 收藏0
網頁版模仿Excel

摘要：鼠標按下拖拽多選單元格這個是本唯一的亮點了個人認為。這樣做的結果是頁面非常卡，因為鼠標移動過程會多次觸發鼠標移動事件，會多次進行單元格元素循環遍歷。網頁版模仿Excel 最近公司閑的dan疼，非要模仿Excel做一個網頁版的Excel，剛開始聽說要做這么一個東西的時候瞬間覺得公司領導高(sang)瞻(xin)遠(bing)矚(kuang)，只能頭鐵的接下了，那就開始干。其實主要目的是...

Carl 2019-08-01 18:42 評論0 收藏0