Node.js 간단한 양방향 바인딩 케이스 코드
- 小云云원래의
- 2018-03-14 18:02:551404검색
이 글은 주로 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으로 문의하세요.