JS 双向数据绑定、单项数据绑定

2021/12/16 23:13:50

编程Tag： js function value 绑定 obj Hello getElementById document 单项

本文主要是介绍JS 双向数据绑定、单项数据绑定，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

简单的双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text" id="aa"/>
<span id="bb" style="border: 2px solid orange;margin-left: 20px;">{{hello}}</span>
<br>
<br>
<input type="text" id="cc"/>

<script>
    // 双向数据绑定的原理：属性拦截
    // 属性拦截实现方式 ： 使用Object.defineProperty()将对象的属性变成访问器属性。

    var obj = {};
    Object.defineProperty(obj, 'hello', {
        enumerable: true,
        configurable: true,
        get: function () {
            return document.getElementById('aa').value;
        },
        set: function (val) {
            document.getElementById('bb').innerHTML = obj.hello;
            document.getElementById('cc').value = obj.hello;
        }
    });
    Object.defineProperty(obj, 'hello2', {
        enumerable: true,
        configurable: true,
        get: function () {
            return document.getElementById('cc').value;
        },
        set: function (val) {
            document.getElementById('aa').value = obj.hello2;
            document.getElementById('bb').innerHTML = obj.hello2;
        }
    });
    document.getElementById('aa').onkeyup = function () {
        obj.hello = this.value;
    };
    document.getElementById('cc').onkeyup = function () {
        obj.hello2 = this.value;
    };
    obj.hello = ""; //属性名必须设置为空，否则在使用插值表达式的时候直接会把插值表达式显示出来
    obj.hello2 = ""; //属性名必须设置为空，否则在使用插值表达式的时候直接会把插值表达式显示出来
</script>
</body>
</html>

单项数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text" id="aa"/>
<span id="bb" style="border: 2px solid orange;margin-left: 20px;">{{hello}}</span>

<script>
    // 双向数据绑定的原理：属性拦截
    // 属性拦截实现方式 ： 使用Object.defineProperty()将对象的属性变成访问器属性。

    var obj = {};
    Object.defineProperty(obj, 'hello', {
        enumerable: true,
        configurable: true,
        get: function () {
            return document.getElementById('aa').value;
        },
        set: function (val) {
            document.getElementById('bb').innerHTML = obj.hello;
        }
    });

    document.getElementById('aa').onkeyup = function () {
        obj.hello = this.value;
    };

    obj.hello = ""; //属性名必须设置为空，否则在使用插值表达式的时候直接会把插值表达式显示出来
</script>
</body>
</html>

这篇关于JS 双向数据绑定、单项数据绑定的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JS 双向数据绑定、单项数据绑定

相关编程文章