この記事では、フロントエンド js の双方向データ バインディングについて説明します。皆様のお役に立てれば幸いです。
<html>
<head>
<title>textBind</title>
</head>
<body>
<input type="text" name="infoInsert">
<p id="infoShow"></p>
<script type="text/javascript">
var obj = {
seeYou: 'Hello'
};
Object.defineProperty(obj, 'infoBind', {
get: function () {
return this.seeYou;
},
set: function (newValue) {
document.getElementById('infoShow').innerText = newValue;
document.getElementsByName('infoInsert')[0].value = newValue;
}
});
document.getElementsByName('infoInsert')[0].addEventListener('keyup', function () {
obj.infoBind = this.value;
});
</script>
</body>
</html> 上記のコードを通して、フレームワークで使用される双方向データ バインディングの基本的な実装原則が ES5 のdefineProperty 属性を通じて実装されていることを確認するのは難しくありません。
関連する推奨事項:
react.js親子コンポーネントデータバインディングのリアルタイム通信サンプル表示
AngularJS双方向データバインディングの詳細説明簡単な例
以上がフロントエンド js 双方向データ バインディングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
