이 글에서는 프론트엔드 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
