首頁手記雙向數據綁定的原理demo

雙向數據綁定的原理demo

標簽：

Html5 JavaScript Vue.js

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title> Object.defineProperty</title>
</head>
<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
    <script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function() {
            return obj
        },
        set: function(newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function(e) {
        obj.txt = e.target.value
    })
    </script>
</body>
</html>

點擊查看更多內容