简单的数据双向绑定

最新推荐文章于 2024-01-07 10:00:00 发布

Bug_small

最新推荐文章于 2024-01-07 10:00:00 发布

阅读量221

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/Bug_small/article/details/95871647

版权

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

0 篇文章

订阅专栏

博客围绕简单的数据双向绑定展开，但具体内容缺失。数据双向绑定在信息技术中是重要概念，能实现数据与视图的同步更新，提升开发效率和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <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>