JS數(shù)據(jù)雙向綁定原理與用法實例分析
本文實例講述了JS數(shù)據(jù)雙向綁定原理與用法。分享給大家供大家參考,具體如下:
通常在前端開發(fā)過程中,經(jīng)常遇到需要綁定兩個甚至多個元素之間的值,比如將input的值綁定到一個h1上,改變input的值,h1的文字也自動更新。
<h1 id="title">Hello</h1> <input type="text" id="a" />
首先是在界面上更改input的值,需要監(jiān)聽input的“input”事件:
var input = document.getElementById("a"), title = document.getElementById("title"); input.oninput = function (e) { title.innerHTML = this.value; };
如果是在代碼中手動修改input.value屬性,這時候最常規(guī)的方法是手動更新h1的文字:
input.value = '123'; title.innerHTML = input.value;
有沒有辦法能讓我們在更新input的value值的時候,自動更新h1的文字呢?當然,我們需要用到Object.defineProperty方法:
Object.defineProperty(input, 'val', { //這里必須定義一個新的屬性名稱,不可以用value,否則會報錯。 get: function () { return this.value; }, set: function (val) { this.value = val; title.innerHTML = val; } });
這樣我們就為input增加了一個val屬性,val的值與input.value是關聯(lián)的,并且我們在val的setter中增加了更新h1文字的代碼,現(xiàn)在我們就可以直接通過
input.val = 'good';
的方式來同時更新input.value和h1的文字了
用Object.defineProperty這個方法來實現(xiàn)數(shù)據(jù)的雙向綁定是Vue的核心思想,該方法的更多細節(jié)請看
更多關于JavaScript相關內(nèi)容可查看本站專題:《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調(diào)試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
JavaScript的變量聲明提升問題淺析(Hoisting)
大家應該都只奧javascript的變量聲明具有hoisting機制,JavaScript引擎在執(zhí)行的時候,會把所有變量的聲明都提升到當前作用域的最前面。網(wǎng)上關于JavaScript的變量聲明提升問題的文章有很多,這篇文章將再次談談關于這方面的問題,有需要的朋友們可以參考借鑒。2016-11-11thinkphp中常用的系統(tǒng)常量和系統(tǒng)變量
這篇文章主要介紹了thinkphp中常用的系統(tǒng)常量和變量,需要的朋友可以參考下2014-03-03關于Javascript加載執(zhí)行優(yōu)化的研究報告
這篇文章主要介紹了關于Javascript加載執(zhí)行優(yōu)化的研究報告,需要的朋友可以參考下2014-12-12JS實現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集
這篇文章主要介紹了JS實現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集,以實例形式較為詳細的分析了JavaScript實現(xiàn)動態(tài)添加下拉菜單及響應鼠標事件生成菜單等實現(xiàn)技巧,需要的朋友可以參考下2015-09-09