vue實現(xiàn)選中效果
前情提要
好久沒有寫Vue了，略有生疏，這個東西還是得多用。
下午看到一個需求，選擇相冊圖片作為輪播圖顯示。接口返回相冊列表，用戶選一下再扔回去。
直到我看到e.target.className我就知道這個事情不簡單。。
Vue是數(shù)據(jù)驅動
數(shù)據(jù)驅動這個是我覺得和jQuery不一樣的地方。
jQuery是點一下，加個class,移個class。
Vue是點一下，數(shù)據(jù)記錄，然后自動通知視圖。
一個是把選中狀態(tài)保存在了DOM，一個是把選中狀態(tài)保存在了js數(shù)據(jù)模型里。
所以在看到了使用Vue然后獲取DOM改class的行為，我及時制止了他。話說你都自己搞了，要Vue干嘛。。。
數(shù)據(jù)驅動和之前的思想 在一起會怎么樣？
數(shù)據(jù)驅動是一個數(shù)據(jù)到視圖的過程，如果你只改視圖不改數(shù)據(jù)。那么他在其他的地方刷新了數(shù)據(jù)，就有可能導致視圖不同步。比如寫的時候寫了，那么讀的時候讀出來的有可能不一樣，為什么會這樣？因為有兩個地方可以改呀，Vue把DOM刪了，新渲染的沒有你寫的狀態(tài)，讀的時候讀個鬼。想想，這一個碰運氣的東西，能好使嗎？
Vue怎么實現(xiàn)這個效果
說了那么多廢話，先上地址吧，傳送門-我寫的DEMO 【具體代碼都在這里】
下面簡單說說三種寫法的思路
- 選中的id做成一個數(shù)組，多維護一個隊列。:class="{selected: ~checkSelect(item.id)}"渲染的時候去判斷數(shù)組里面有那個id沒有。
- 選中的id做成一個對象，多維護一個對象。:class="{selected: selectList[item.id]}"和前一個相比對象的話，id作為key查找起來方便了很多。這里要注意的是.$set，劃重點要考的。
- 直接改原對象，多加一個參數(shù)。這個不怎么推薦。
到此這篇關于vue實現(xiàn)選中效果的文章就介紹到這了,更多相關vue選中效果內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
VUE子組件向父組件傳值詳解（含傳多值及添加額外參數(shù)場景）
這篇文章主要給大家介紹了關于VUE子組件向父組件傳值（含傳多值及添加額外參數(shù)場景）的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
這篇文章主要為大家介紹了Vue的監(jiān)聽屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
element input輸入框自動獲取焦點的實現(xiàn)
本文主要介紹了element input輸入框自動獲取焦點的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue-rx的初步使用教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vscode 插件開發(fā) + vue的操作方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
指令是Vue模板中最常用的一項功能，它帶有前綴v-，主要職責是當其表達式的值改變時，相應的將某些行為應用在 DOM 上。這篇文章主要介紹了vue內置指令詳解,需要的朋友可以參考下2018-04-04
本篇文章主要介紹了Vue監(jiān)聽數(shù)據(jù)變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了Vue3中插槽(slot)的全部使用方法，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
uni-app是一款基于Vue.js的跨平臺開發(fā)框架，它借助了 Vue.js 的語法和組件化開發(fā)思想，本文將詳細介紹 uni-app 的全局配置、靜態(tài)資源管理、路由管理以及數(shù)據(jù)通信和狀態(tài)管理的進階使用技巧,需要的朋友可以參考下2023-06-06