Rumah > Artikel > hujung hadapan web > 怎样用代码直观的表示mvvm原理
这次给大家带来怎样用代码直观的表示mvvm原理,用代码的表示mvvm原理的注意事项有哪些,下面就是实战案例,一起来看一下。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div itcast-controller="myController"> <input type="text" itcast-value="title"> <h1 itcast-cont="title"></h1> </div> <script> var model = { title:'我是标题', setTitle:function(title){ this.title = title; flush(); } }; function flush(){ //选择出来范围 var itcastScope = document.querySelector('[itcast-controller]'); //选择所有绑定了的元素 var itcastValueArr = document.querySelectorAll('[itcast-value]'); var itcastContArr = document.querySelectorAll('[itcast-cont]'); for(var i=0;i<itcastValueArr.length;i++){ itcastValueArr[i].value = model[itcastValueArr[i].getAttribute("itcast-value")]; itcastValueArr[i].oninput = function(){ model.setTitle(this.value); }; } for(var i=0;i<itcastValueArr.length;i++){ itcastContArr[i].innerHTML = model[itcastContArr[i].getAttribute("itcast-cont")]; } } flush(); </script></body></html>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci 怎样用代码直观的表示mvvm原理. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!