怎样用代码直观的表示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>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注Work网其它相关文章！