ホームページ > 記事 > ウェブフロントエンド > jsで双方向バインディングを実装する方法
jsで双方向バインディングを実装する方法
- 亚连オリジナル
- 2018-06-14 10:36:392257ブラウズ
ここで、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でファイルタイプのサイズを判断する方法jsでファイルタイプのサイズを判断する方法ドロップダウンボックスのAngular Fuzzyクエリ関数で実装する方法 Nodejsの暗号モジュールセキュリティに関する知識（詳細なチュートリアル）以上がjsで双方向バインディングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。