Maison > Article > interface Web > Comment exprimer intuitivement le principe mvvm avec du code
Cette fois je vais vous montrer comment utiliser le code pour exprimer intuitivement le principe mvvm, et quelles sont les précautions pour exprimer le principe mvvm en code Ce qui suit est un cas pratique, jetons un coup d'œil. .
<!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>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention au site Web php chinois Autres articles connexes !
Lecture recommandée :
Le principe d'exécution du code Node.js
Le concept d'utilisation de portées indépendantes en angulaire
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!