ホームページ >ウェブフロントエンド >jsチュートリアル >jsの単純な双方向バインディングケースコード
jsの単純な双方向バインディングケースコード
- 小云云オリジナル
- 2018-03-14 18:02:551405ブラウズ
この記事では、主に 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の値を変更します。入力ボックスの値も変更され、新しい値を取得するイベントがトリガーされます
関連する推奨事項:
JavaScript で双方向データ バインディングを実装する 3 つのメソッドについて共有します
。 JavaScript データの双方向バインディングを簡単に実装する Define_javascript スキル
vue.js の双方向バインディングの実装原理を深く理解する
以上がjsの単純な双方向バインディングケースコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。