快捷導(dǎo)航

js最簡(jiǎn)單的雙向綁定實(shí)例講解

更新時(shí)間：2018年01月02日 14:26:10 作者：專(zhuān)注前端30年

下面小編就為大家分享一篇js最簡(jiǎn)單的雙向綁定實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

把代碼復(fù)制放到頁(yè)面里面運(yùn)行看一下效果就好了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="text" id="myinput" >
<script>
  function watch(obj,key,callback) {
    var old = obj[key];
    Object.defineProperty(obj,key,{
      set:function(val){
        var oldVal = old;
        old = val;
        callback(val,oldVal,this);
      },
      get:function(){
        return old;
      }
    });
  }
  var input = document.getElementById("myinput");
  var obj = {};
  watch(obj, "input",function (val) {
    input.value = val;
    console.log("這里是不管view層，還是module層修改后的回調(diào)，最后設(shè)置的值是"+val);
  });
  input.onkeyup = function () {
    obj.input = input.value;
  };
</script>
</body>
</html>

代碼測(cè)試

修改了input內(nèi)的值，會(huì)看到控制臺(tái)打印出新的值

在控制臺(tái)修改obj.input的值，input框內(nèi)的值也會(huì)跟著改變，也會(huì)觸發(fā)事件，獲取新值

以上這篇js最簡(jiǎn)單的雙向綁定實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript原型繼承之基礎(chǔ)機(jī)制分析
由于語(yǔ)言設(shè)計(jì)上的原因，JavaScript 沒(méi)有真正意義上“類(lèi)”的概念。而通常使用的 new 命令實(shí)例化對(duì)象的方法，其實(shí)是對(duì)原型對(duì)象的實(shí)例化。
2011-08-08
JavaScript函數(shù)this指向問(wèn)題詳解
這篇文章主要為大家介紹了JavaScript函數(shù)this指向，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-11-11
淺談JavaScript閉包
這篇文章主要介紹了JavaScript閉包，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
js字符串去重復(fù)id的實(shí)現(xiàn)代碼
最近由于需要我們將相關(guān)id的重復(fù)的去掉，一個(gè)是客戶端一個(gè)后臺(tái)程序把關(guān)，這里分享下js的去重復(fù)id的實(shí)現(xiàn)代碼
2013-07-07
JS動(dòng)態(tài)創(chuàng)建DOM元素的方法
這篇文章主要介紹了JS動(dòng)態(tài)創(chuàng)建DOM元素的方法,涉及javascript動(dòng)態(tài)創(chuàng)建DOM元素及DOM元素事件綁定與刪除的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
layui數(shù)據(jù)表格 table.render 報(bào)錯(cuò)的解決方法
今天小編就為大家分享一篇layui數(shù)據(jù)表格 table.render 報(bào)錯(cuò)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
基于JavaScript實(shí)現(xiàn)除夕煙花秀與隨機(jī)祝福語(yǔ)
新年即將來(lái)臨，本文將為大家介紹一個(gè)基于JavaScript實(shí)現(xiàn)的頁(yè)面特效：煙花秀+春節(jié)隨機(jī)祝福語(yǔ)。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下
2022-01-01
js中document.write和document.writeln的區(qū)別
這篇文章主要介紹了js中document.write和document.writeln的區(qū)別,需要的朋友可以參考下
2018-03-03
js通過(guò)更改按鈕的顯示樣式實(shí)現(xiàn)按鈕的滑動(dòng)效果
使用js實(shí)現(xiàn)按鈕的滑動(dòng)效果，通過(guò)更改按鈕的顯示樣式，來(lái)實(shí)現(xiàn)按鈕動(dòng)態(tài)滑動(dòng),需要的朋友可以參考下
2014-04-04
JavaScript Array對(duì)象使用方法解析
這篇文章主要介紹了JavaScript Array對(duì)象使用方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09