js에서 양방향 바인딩을 구현하는 방법

亚连
풀어 주다: 2018-06-14 10:36:39
원래의
2256명이 탐색했습니다.

이제 js에서 가장 간단한 양방향 바인딩 예제에 대한 설명을 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

코드를 복사해서 페이지에 넣고 실행하면 효과를 볼 수 있습니다

<!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层修改后的回调,最后设置的值是"+val);
  });
  input.onkeyup = function () {
    obj.input = input.value;
  };
</script>
</body>
</html>
로그인 후 복사

코드 테스트

입력 값을 수정하면 다음과 같이 새 값이 인쇄되는 것을 볼 수 있습니다. the console

컨트롤에서 obj.input의 값을 수정하면 그에 따라 입력 상자의 값도 변경되고 새로운 값을 얻기 위해 이벤트가 실행됩니다. 위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 될 것입니다.

관련 글:

JS를 활용한 입력 검색 기능 구현 방법

노드 모듈 및 npm 패키지 관리 도구 활용 방법

JavaScript를 활용한 추측 게임 구현 방법(자세한 튜토리얼)

js를 사용하여 구현하는 방법 다양한 정렬 방법

vue에서 cdn 최적화를 사용하는 방법

js에서 파일 형식 크기를 판단하는 방법

js에서 파일 형식 크기를 판단하는 방법

드롭다운 상자의 Angular 퍼지 쿼리 기능에서 구현하는 방법

Nodejs의 암호화 모듈 보안에 대한 지식(자세한 튜토리얼)

위 내용은 js에서 양방향 바인딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!