JS实现数据双向绑定

在input中输入内容时，下面会实时展示input的内容，并且修改data中的value。想要实现input内容的实时监听需要给input同时绑定　oninput   onporpertychange  两个事件。

   <div>
        输入数据：<input type="text" id="input" oninput="watch(event)" onporpertychange="watch(event)"> <br />
        展示数据：<p id="show"></p>
    </div>
    <script>
        var data = { value: '这是初始值' }
        var input = document.getElementById('input')
        var show = document.getElementById('show')

        window.addEventListener('load', () => {
            input.value = data.value
            show.innerText = data.value
            console.log('初始化的数据----', data);
        })

        function watch() {
            show.innerText = input.value
            data.value = input.value
            console.log('数据更新之后----', data);
        }

        //keyup只能在键盘弹起的时候响应,所以不能实时响应
       /* input.addEventListener('keyup', () => {
            show.innerText = input.value
            data.value = input.value
            console.log('数据更新之后----', data);
        })*/
    </script>