原生js实现数据单向绑定

Posted 2020-09-24 Jade_g

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现数据单向绑定相关的知识，希望对你有一定的参考价值。

Object.defineProperty()方法直接在对象上定义一个新属性，或修改对象上的现有属性，并返回该对象。

Object.defineProperty(obj, prop, descriptor)

参数

　　obj 定义属性的对象。
　　prop 要定义或修改的属性的名称。

　　descriptor 定义或修改属性的描述符。

　　返回值传递给函数的对象。
注意：数据描述符和访问器描述符，不能同时存在（value,writable 和 get,set）

　　get:函数return将被用作属性的值。

　　set:该函数将仅接收参数赋值给该属性的新值。(在属性改变时调用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text" id="aa"/>*<input type="text" id="cc"/>
<span id="bb">{{hello}}</span>

<script>
   var obj = {};
    Object.defineProperty(obj,‘hello‘,{
        enumerable: true,
        configurable: true,
        get: function() { return document.getElementById(‘aa‘).value; },
        set:function(val){
            document.getElementById(‘bb‘).innerHTML = val*obj.hello2;
        }
    });
   Object.defineProperty(obj,‘hello2‘,{
       enumerable: true,
       configurable: true,
       get: function() { return document.getElementById(‘cc‘).value; },
       set:function(val){
           document.getElementById(‘bb‘).innerHTML = val*obj.hello;
       }
   });
    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>

以上是关于原生js实现数据单向绑定的主要内容，如果未能解决你的问题，请参考以下文章