简单的数据双向绑定

最新推荐文章于 2021-04-21 19:16:02 发布

Bug_small

最新推荐文章于 2021-04-21 19:16:02 发布

阅读量175

点赞数 1

分类专栏：简单的数据双向绑定文章标签：简单的数据双向绑定

本文链接：https://blog.csdn.net/Bug_small/article/details/95871647

版权

简单的数据双向绑定专栏收录该内容

0 篇文章 0 订阅

订阅专栏

    <input type="text" id="input1">
</p>

<p>
    输入框1 =>
    <input type="text" id="input2">
</p>

<div>
    输入值是 =>
    <span id="span"></span>
</div>

<script>
    //第一步获取所有元素;
    var input1 = document.getElementById('input1');
    var input2 = document.getElementById('input2');
    var span = document.getElementById('span');
    var data = {}; //数据

    Object.defineProperties(data, {
        val1: {
            configurable: true,
            get() {
                input1.value = '';
                input2.value = '';
                span.innerHTML = '';
                return "";
            },

            set(newValue) {
                input2.value = newValue;
                span.innerHTML = newValue;
            },
        },

        val2: {
            configurable: true,
            get (){
                input1.value = '';
                input2.value = '';
                span.innerHTML = '';
                return "";
            },
            set(newValue) {
              input1.value = newValue;
              span.innerHTML = newValue;
            }
        }

    });

    input1.value = data.val1;
    input1.addEventListener('keyup',function(){
          data.val1 = input1.value;
    },false);

    input2.addEventListener('keyup',function(){
          data.val2 = input2.value;
    },false); 



























</script>