JS數(shù)據(jù)雙向綁定原理與用法實(shí)例分析
本文實(shí)例講述了JS數(shù)據(jù)雙向綁定原理與用法。分享給大家供大家參考，具體如下：
通常在前端開發(fā)過程中，經(jīng)常遇到需要綁定兩個(gè)甚至多個(gè)元素之間的值，比如將input的值綁定到一個(gè)h1上，改變input的值，h1的文字也自動(dòng)更新。
<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;
};
如果是在代碼中手動(dòng)修改input.value屬性，這時(shí)候最常規(guī)的方法是手動(dòng)更新h1的文字：
input.value = '123'; title.innerHTML = input.value;
有沒有辦法能讓我們?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)在我們就可以直接通過
input.val = 'good';
的方式來同時(shí)更新input.value和h1的文字了
用Object.defineProperty這個(gè)方法來實(shí)現(xiàn)數(shù)據(jù)的雙向綁定是Vue的核心思想，該方法的更多細(xì)節(jié)請(qǐng)看
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(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)非常簡單的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ù)綁定的簡單實(shí)現(xiàn)方法
相關(guān)文章
javascript運(yùn)算符——邏輯運(yùn)算符全面解析
下面小編就為大家?guī)硪黄猨avascript運(yùn)算符——邏輯運(yùn)算符詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
JavaScript 數(shù)組- Array的方法總結(jié)(推薦)
下面小編就為大家?guī)硪黄狫avaScript 數(shù)組- Array的方法總結(jié)(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
js實(shí)現(xiàn)表格拖動(dòng)選項(xiàng)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)表格拖動(dòng)選項(xiàng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
JavaScript函數(shù)Call、Apply原理實(shí)例解析
這篇文章主要介紹了JavaScript函數(shù)Call、Apply原理實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
我們?cè)陂_發(fā)中常遇到一種情況,在創(chuàng)建一個(gè)元素之后,需要給它綁定事件,這篇文章主要給大家介紹了關(guān)于js為新添加元素添加綁定事件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
深入理解JavaScript系列（28）：設(shè)計(jì)模式之工廠模式詳解
這篇文章主要介紹了深入理解JavaScript系列（28）：設(shè)計(jì)模式之工廠模式詳解,工廠模式定義一個(gè)用于創(chuàng)建對(duì)象的接口,這個(gè)接口由子類決定實(shí)例化哪一個(gè)類,需要的朋友可以參考下2015-03-03
閉包（closure）是Javascript語言的一個(gè)難點(diǎn)，也是它的特色，很多高級(jí)應(yīng)用都要依靠閉包實(shí)現(xiàn)。小編之前一直糊里糊涂的，沒有能夠弄明白JavaScript的閉包到底是什么，有什么用，本文把自己的理解些出來分享一下，希望不理解JavaScript閉包的朋友們看了之后能夠理解閉包！2016-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義底部導(dǎo)航，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
解決ie6下png透明的問題想必前端都比較清楚，雖然有很多方法，但是我覺得用JS還是最省事的方法，不管是圖片還是背景圖片都OK。2013-08-08
前面文章里寫過一個(gè)彈出層對(duì)話框，但ie6下有bug，根本沒有實(shí)現(xiàn)position:fixed的效果，當(dāng)時(shí)沒有真實(shí)ie6環(huán)境，測(cè)試疏忽，匆匆放到博客上，還讓一些讀者看到甚至使用，在這里表示萬分抱歉啊2011-05-05