js实现数据的双向绑定

数据的双向绑定

双向绑定指的是视图和数据两个之间双向绑定！

在页面中绑定两个或者多个元素，比如一个input框和一个p标签，当在input框输入值时，p标签也会自动更新文本。只关注数据的操作，减少对DOM的操作。

一、直接赋值

也就是将input框的值赋值给p标签的文本

html代码块

    <p id="txt"></p>
    <input type="text" id="inp">

js代码块

   <script>
       var txt = document.getElementById('txt');
       var inp = document.getElementById('inp');
       inp.oninput = function() {
           txt.innerHTML = inp.value;
       }
   </script>

也能够实现当input框的值发生改变时，p标签的文本也可以及时主动更新

实现效果

直接赋值1.png

直接赋值2.png

二、访问器监听 Object.defineProperty方法

访问器监听的实现，主要采用了javascript中原生方法：Object.defineProperty，该方法可以为某对象添加访问器属性，当获取或者给该对象属性赋值的时候，会触发访问器属性

注意：1.Object.defineProperty方法只能用于对象，所有使用该方法时，必须创建对象。

2.当你访问或者获取该对象的属性时，会立马触发访问器属性getter，从而去获取该属性的值

3.当你设置该对象的属性时，会立马触发访问器属性setter，设置该属性的值，setter更改的是视图（DOM）！setter必须要传参！

html代码块

    <p id="txt"></p>
    <input type="text" id="inp">

js代码块

    <script>
        var txt = document.getElementById('txt');
        var inp = document.getElementById('inp');
        var obj = {} //创建空对象——‘数据中心’
        Object.defineProperty(obj, 'value', {
            //获取input的值
            get() {
                return inp.value
            },
            //设置input框的值
            set(res) {
                inp.value = res
                // 数据改变了触发setter方法，更改的是视图(DOM)==>数据改变视图
                txt.innerHTML = res
            }
        })

        // 操作DOM，更改的是数据==>视图改变数据
        inp.oninput = function() {
            obj.value = inp.value
        }
    </script>

实现效果