js에서 양방향 바인딩을 구현하는 방법-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-06-14 10:36:39

원래의

2248명이 탐색했습니다.

이제 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에서 파일 형식 크기를 판단하는 방법

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

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