MVVM核心实现代码(简易实现)

Posted 登高一呼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MVVM核心实现代码(简易实现)相关的知识,希望对你有一定的参考价值。

 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>

 

以上是关于MVVM核心实现代码(简易实现)的主要内容,如果未能解决你的问题,请参考以下文章

简易版LiveData-->实现MVVM

简易版LiveData-->实现MVVM

简易版LiveData-->实现MVVM

简易版LiveData-->实现MVVM

项目——简易计算器

剖析Vue原理&实现双向绑定MVVM