本文實(shí)例講述了JS數(shù)據(jù)雙向綁定原理與用法。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)建站是專業(yè)的巨野網(wǎng)站建設(shè)公司，巨野接單;提供網(wǎng)站建設(shè)、網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行巨野網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

通常在前端開發(fā)過(guò)程中，經(jīng)常遇到需要綁定兩個(gè)甚至多個(gè)元素之間的值，比如將input的值綁定到一個(gè)h2上，改變input的值，h2的文字也自動(dòng)更新。 

Hello

首先是在界面上更改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)更新h2的文字：

input.value = '123';
title.innerHTML = input.value;

有沒(méi)有辦法能讓我們?cè)诟耰nput的value值的時(shí)候，自動(dòng)更新h2的文字呢？當(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中增加了更新h2文字的代碼，現(xiàn)在我們就可以直接通過(guò)

input.val = 'good';

的方式來(lái)同時(shí)更新input.value和h2的文字了

用Object.defineProperty這個(gè)方法來(lái)實(shí)現(xiàn)數(shù)據(jù)的雙向綁定是Vue的核心思想，該方法的更多細(xì)節(jié)請(qǐng)看

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

更多關(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ì)有所幫助。