jsで双方向バインディングを実装する方法-jsチュートリアル-php.cn

jsで双方向バインディングを実装する方法

亚连

リリース： 2018-06-14 10:36:39

オリジナル

2280 人が閲覧しました

ここで、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>

ログイン後にコピー

コードテスト

入力の値を変更すると、次のように出力される新しい値が表示されます。コンソール

コントロール内 obj.input の値を変更すると、入力ボックスの値もそれに応じて変更され、新しい値を取得するためにイベントがトリガーされます。上記は私が皆さんのためにコンパイルしたものです。将来みんなに役立つでしょう。

JSを使用した入力検索機能の実装方法

nodeモジュールとnpmパッケージ管理ツールの使い方

JavaScriptを使用した推測ゲームの実装方法(詳細チュートリアル)

jsでの実装方法色々なソート方法

vueでcdn最適化を使う方法

jsでファイルタイプのサイズを判断する方法

ドロップダウンボックスのAngular Fuzzyクエリ関数で実装する方法

Nodejsの暗号モジュールセキュリティに関する知識（詳細なチュートリアル）