>웹 프론트엔드 >JS 튜토리얼 >Node.js 간단한 양방향 바인딩 케이스 코드

Node.js 간단한 양방향 바인딩 케이스 코드

小云云
小云云원래의
2018-03-14 18:02:551368검색

이 글은 주로 js의 간단한 양방향 바인딩 케이스 코드를 공유합니다. 코드를 복사하여 페이지에 넣어서 실행하면 모든 사람에게 도움이 되기를 바랍니다.

<span style="font-size: 14px;"><!DOCTYPE html><html lang="en"><head><br/>    <meta charset="UTF-8"><br/>    <title>Title</title></head><body><input type="text" id="myinput" ><script><br/>    function watch(obj,key,callback) {<br/>        var old = obj[key];        Object.defineProperty(obj,key,{<br/>            set:function(val){<br/>                var oldVal = old;<br/>                old = val;<br/>                callback(val,oldVal,this);<br/>            },<br/>            get:function(){<br/>                return old;<br/>            }<br/>        });<br/>    }    var input = document.getElementById("myinput");    var obj = {};<br/>    watch(obj, "input",function (val) {<br/>        input.value = val;<br/>        console.log("这里是不管view层,还是module层修改后的回调,最后设置的值是"+val);<br/>    });<br/><br/>    input.onkeyup = function () {<br/>        obj.input = input.value;<br/>    };</script></body></html><br/></span>

코드 테스트

  • 입력 값을 수정하면 콘솔에 새 값이 인쇄되는 것을 볼 수 있습니다.

  • 콘솔에서 obj.input 값을 수정하세요. 입력 상자에서 값도 변경되고 새 값을 얻기 위해 이벤트가 실행됩니다.

관련 권장 사항:

자바스크립트로 양방향 데이터 바인딩을 구현하는 세 가지 방법 공유

자바스크립트 데이터 양방향 바인딩을 쉽게 구현 Define_javascript 기술

vue.js 양방향 바인딩 구현 원리에 대한 심층적인 이해

위 내용은 Node.js 간단한 양방향 바인딩 케이스 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.