1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>MVVM</title> 6 </head> 7 <body> 8 <input id="user.name" type="text" > 姓名 9 <input id="user.age" type="text" > 年龄 10 <script type="text/javascript"> 11 function User(){ 12 var user = this; 13 var u_name = document.getElementById('user.name'); 14 var u_age = document.getElementById('user.age'); 15 u_name.addEventListener('change', function(){ user.name = this.value; }); 16 u_age.addEventListener('change', function(){ user.age = this.value; }); 17 Object.defineProperties(user,{ 18 name : { 19 get : function(){ return name; }, 20 set : function(new_name){ name = new_name; u_name.value = name; } 21 }, 22 age : { 23 get : function(){ return age; }, 24 set : function(new_age){ age = new_age; u_age.value = age; } 25 } 26 }); 27 return user; 28 }; 29 var user = new User(); 30 user.name = '覆水难收'; 31 </script> 32 </body> 33 </html>