JS數(shù)據(jù)雙向綁定原理與用法實(shí)例分析
本文實(shí)例講述了JS數(shù)據(jù)雙向綁定原理與用法。分享給大家供大家參考,具體如下:
通常在前端開(kāi)發(fā)過(guò)程中,經(jīng)常遇到需要綁定兩個(gè)甚至多個(gè)元素之間的值,比如將input的值綁定到一個(gè)h1上,改變input的值,h1的文字也自動(dòng)更新。
<h1 id="title">Hello</h1> <input type="text" id="a" />
首先是在界面上更改input的值,需要監(jiān)聽(tīng)input的“input”事件:
var input = document.getElementById("a"), title = document.getElementById("title"); input.oninput = function (e) { title.innerHTML = this.value; };
如果是在代碼中手動(dòng)修改input.value屬性,這時(shí)候最常規(guī)的方法是手動(dòng)更新h1的文字:
input.value = '123'; title.innerHTML = input.value;
有沒(méi)有辦法能讓我們?cè)诟耰nput的value值的時(shí)候,自動(dòng)更新h1的文字呢?當(dāng)然,我們需要用到Object.defineProperty方法:
Object.defineProperty(input, 'val', { //這里必須定義一個(gè)新的屬性名稱,不可以用value,否則會(huì)報(bào)錯(cuò)。 get: function () { return this.value; }, set: function (val) { this.value = val; title.innerHTML = val; } });
這樣我們就為input增加了一個(gè)val屬性,val的值與input.value是關(guān)聯(lián)的,并且我們?cè)趘al的setter中增加了更新h1文字的代碼,現(xiàn)在我們就可以直接通過(guò)
input.val = 'good';
的方式來(lái)同時(shí)更新input.value和h1的文字了
用Object.defineProperty這個(gè)方法來(lái)實(shí)現(xiàn)數(shù)據(jù)的雙向綁定是Vue的核心思想,該方法的更多細(xì)節(jié)請(qǐng)看
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- vue.js數(shù)據(jù)綁定的方法(單向、雙向和一次性綁定)
- 實(shí)現(xiàn)非常簡(jiǎn)單的js雙向數(shù)據(jù)綁定
- javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方式小結(jié)
- 輕松實(shí)現(xiàn)javascript數(shù)據(jù)雙向綁定
- JavaScript中雙向數(shù)據(jù)綁定詳解
- JS原生數(shù)據(jù)雙向綁定實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
- js項(xiàng)目中雙向數(shù)據(jù)綁定的簡(jiǎn)單實(shí)現(xiàn)方法
相關(guān)文章
JS實(shí)現(xiàn)可以用鍵盤(pán)方向鍵控制的動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)可以用鍵盤(pán)方向鍵控制的動(dòng)畫(huà),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12JavaScript實(shí)現(xiàn)Promise流程詳解
首先呢,Promise是異步中比較重要的知識(shí)點(diǎn),學(xué)習(xí)的最好方法就是掌握它的基本原理。所以這一篇主要說(shuō)一下如何用JS來(lái)實(shí)現(xiàn)一個(gè)自己的promise2022-09-09JavaScript的變量聲明提升問(wèn)題淺析(Hoisting)
大家應(yīng)該都只奧javascript的變量聲明具有hoisting機(jī)制,JavaScript引擎在執(zhí)行的時(shí)候,會(huì)把所有變量的聲明都提升到當(dāng)前作用域的最前面。網(wǎng)上關(guān)于JavaScript的變量聲明提升問(wèn)題的文章有很多,這篇文章將再次談?wù)勱P(guān)于這方面的問(wèn)題,有需要的朋友們可以參考借鑒。2016-11-11thinkphp中常用的系統(tǒng)常量和系統(tǒng)變量
這篇文章主要介紹了thinkphp中常用的系統(tǒng)常量和變量,需要的朋友可以參考下2014-03-03關(guān)于Javascript加載執(zhí)行優(yōu)化的研究報(bào)告
這篇文章主要介紹了關(guān)于Javascript加載執(zhí)行優(yōu)化的研究報(bào)告,需要的朋友可以參考下2014-12-12JavaScript判斷頁(yè)面是否滾動(dòng)到底部的技巧
在 JavaScript 中,我們可以通過(guò)一些技巧來(lái)判斷頁(yè)面是否滾動(dòng)到底部,本文將介紹一些常用的方法,幫助你在項(xiàng)目中實(shí)現(xiàn)這一功能,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11JS實(shí)現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集
這篇文章主要介紹了JS實(shí)現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集,以實(shí)例形式較為詳細(xì)的分析了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加下拉菜單及響應(yīng)鼠標(biāo)事件生成菜單等實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09JavaScript類型檢測(cè)的方法實(shí)例教程
這篇文章主要給大家介紹了關(guān)于JavaScript類型檢測(cè)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04