微信小程序之?dāng)?shù)據(jù)雙向綁定與數(shù)據(jù)操作
微信小程序之?dāng)?shù)據(jù)雙向綁定與數(shù)據(jù)操作
數(shù)據(jù)雙向綁定是指js部分?jǐn)?shù)據(jù)發(fā)生變化是html部分的數(shù)據(jù)也會(huì)發(fā)生變化，當(dāng)然html部分?jǐn)?shù)據(jù)發(fā)生變化js部分?jǐn)?shù)據(jù)也會(huì)發(fā)生變化，從而使界面很方便的實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)顯示，一般擁有數(shù)據(jù)雙向綁定的前端框架都為mvvm結(jié)構(gòu)。數(shù)據(jù)雙向綁定是個(gè)好東西，an1 an2 vue 也都有數(shù)據(jù)雙向綁定的機(jī)制，而且基本都差不多，抄來抄去嘛！！下面以一個(gè)列表為例子來說下數(shù)據(jù)雙向綁定及數(shù)據(jù)的操作。
1.把要進(jìn)行數(shù)據(jù)雙向綁定的屬性放在page的data里，然后在html里使用{{屬性名}}即可進(jìn)行數(shù)據(jù)顯示；
2.that.setData({ synctable:res.data.data.list }); 使用setData方法給synctable:res賦值并更新界面相應(yīng)數(shù)據(jù)。
3.for(var i=0;that.data.synctable.length>i;i++){ that.data.synctable[i].top=i*40; } 使用 that.data.synctable取到data里的synctable值然后添加上top新字段，然后使用style="top:{{item.top}}px;" 即可在js動(dòng)態(tài)控制樣式屬性（使用這種方法控制樣式只是為了實(shí)現(xiàn)拖拽列表，一般并不這樣控制樣式）
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
JS控制表格隔行變色...2006-06-06
詳解微信小程序 通過控制CSS實(shí)現(xiàn)view隱藏與顯示
這篇文章主要介紹了微信小程序 通過控制CSS實(shí)現(xiàn)view隱藏與顯示的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家介紹了JS前端使用canvas編寫一個(gè)簽名板實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
前端AI機(jī)器學(xué)習(xí)在瀏覽器中訓(xùn)練模型
這篇文章主要為大家介紹了前端AI機(jī)器學(xué)習(xí)在瀏覽器中訓(xùn)練模型的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序中的swiper組件詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序 Image API實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了 微信小程序頁面生命周期的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了克隆 JavaScript,克隆又有淺克隆與深克隆，文章圍繞JavaScript淺克隆與深克隆的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了微信小程序checkbox組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
JS前端使用canvas實(shí)現(xiàn)物體的點(diǎn)選示例
這篇文章主要為大家介紹了JS前端使用canvas實(shí)現(xiàn)物體的點(diǎn)選示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08