原生js實現數據單向綁定

時間 2019-12-02

標籤原生實現數據單向綁定欄目 JavaScript 简体版

原文原文鏈接

Object.defineProperty()方法直接在對象上定義一個新屬性，或修改對象上的現有屬性，並返回該對象。html

Object.defineProperty(obj, prop, descriptor)函數

參數this

　　obj 定義屬性的對象。
　　prop 要定義或修改的屬性的名稱。spa

　　descriptor 定義或修改屬性的描述符。code

　　返回值傳遞給函數的對象。
注意：數據描述符和訪問器描述符，不能同時存在（value,writable 和 get,set）htm

　　get:函數return將被用做屬性的值。對象

　　set:該函數將僅接收參數賦值給該屬性的新值。(在屬性改變時調用)
blog

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <input type="text" id="aa"/>*<input type="text" id="cc"/>
 9 <span id="bb">{{hello}}</span>
10 
11 <script>
12    var obj = {};
13     Object.defineProperty(obj,'hello',{
14         enumerable: true,
15         configurable: true,
16         get: function() { return document.getElementById('aa').value; },
17         set:function(val){
18             document.getElementById('bb').innerHTML = val*obj.hello2;
19         }
20     });
21    Object.defineProperty(obj,'hello2',{
22        enumerable: true,
23        configurable: true,
24        get: function() { return document.getElementById('cc').value; },
25        set:function(val){
26            document.getElementById('bb').innerHTML = val*obj.hello;
27        }
28    });
29     document.getElementById('aa').onkeyup = function(){
30         obj.hello = this.value;
31     };
32    document.getElementById('cc').onkeyup = function(){
33        obj.hello2 = this.value;
34    };
35     obj.hello = "";
36     obj.hello2 = "";
37 </script>
38 
39 </body>
40 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。