成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue實(shí)現(xiàn)選中效果

yanest / 3018人閱讀

摘要：想想，這一個(gè)碰運(yùn)氣的東西，能好使嗎怎么實(shí)現(xiàn)這個(gè)效果說了那么多廢話，先上地址吧，傳送門我寫的下面簡(jiǎn)單說說三種寫法的思路選中的做成一個(gè)數(shù)組，多維護(hù)一個(gè)隊(duì)列。選中的做成一個(gè)對(duì)象，多維護(hù)一個(gè)對(duì)象。

前情提要

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

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
下面簡(jiǎn)單說說三種寫法的思路

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

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

直接改原對(duì)象，多加一個(gè)參數(shù)。這個(gè)不怎么推薦。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113545.html

相關(guān)文章

  • vue實(shí)現(xiàn)選中效果

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

    jubincn 評(píng)論0 收藏0

  • 使用 Drag and Drop 給Web應(yīng)用提升交互體驗(yàn)

    摘要：注意點(diǎn)在鼠標(biāo)操作拖放期間，有一些事件可能觸發(fā)多次，比如和?？赏献г兀ㄗh使用，設(shè)定可拖拽元素的鼠標(biāo)游標(biāo)，提升交互。在中使用拖拽中使用可以直接綁定到組件上。 什么是 Drag and Drop （拖放）？ 簡(jiǎn)單來說，HTML5 提供了 Drag and Drop API，允許用戶用鼠標(biāo)選中一個(gè)可拖動(dòng)元素，移動(dòng)鼠標(biāo)拖放到一個(gè)可放置到元素的過程。 我相信每個(gè)人都或多或少接觸過拖放，比如瀏覽...

    legendmohe 評(píng)論0 收藏0

  • 網(wǎng)頁(yè)版模仿Excel

    摘要：鼠標(biāo)按下拖拽多選單元格這個(gè)是本唯一的亮點(diǎn)了個(gè)人認(rèn)為。這樣做的結(jié)果是頁(yè)面非?？?，因?yàn)槭髽?biāo)移動(dòng)過程會(huì)多次觸發(fā)鼠標(biāo)移動(dòng)事件，會(huì)多次進(jìn)行單元格元素循環(huán)遍歷。 網(wǎng)頁(yè)版模仿Excel 最近公司閑的dan疼，非要模仿Excel做一個(gè)網(wǎng)頁(yè)版的Excel，剛開始聽說要做這么一個(gè)東西的時(shí)候瞬間覺得公司領(lǐng)導(dǎo)高(sang)瞻(xin)遠(yuǎn)(bing)矚(kuang)，只能頭鐵的接下了，那就開始干。其實(shí)主要目的是...

    james 評(píng)論0 收藏0

  • 網(wǎng)頁(yè)版模仿Excel

    摘要：鼠標(biāo)按下拖拽多選單元格這個(gè)是本唯一的亮點(diǎn)了個(gè)人認(rèn)為。這樣做的結(jié)果是頁(yè)面非常卡，因?yàn)槭髽?biāo)移動(dòng)過程會(huì)多次觸發(fā)鼠標(biāo)移動(dòng)事件，會(huì)多次進(jìn)行單元格元素循環(huán)遍歷。 網(wǎng)頁(yè)版模仿Excel 最近公司閑的dan疼，非要模仿Excel做一個(gè)網(wǎng)頁(yè)版的Excel，剛開始聽說要做這么一個(gè)東西的時(shí)候瞬間覺得公司領(lǐng)導(dǎo)高(sang)瞻(xin)遠(yuǎn)(bing)矚(kuang)，只能頭鐵的接下了，那就開始干。其實(shí)主要目的是...

    Carl 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

yanest

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<