vue v-model响应式指令demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
    <input type="text" v-model="animateChange">
    请输入<input type="text"v-model="animateChange">
    <strong v-model="b"></strong>
    <strong v-model="gs"></strong>
</body>
<script>
    window.onload=function(){
        var allTags = document.body.getElementsByTagName('*')
        var inputs=document.getElementsByTagName('input')
        var selects = document.getElementsByTagName('select')
        for (var i=0;i<inputs.length;i++){
            inputs[i].addEventListener('input',function(){
                  if(this.attributes['v-model']){
                    for(var j=0;j<allTags.length;j++){
                        if (allTags[j].attributes['v-model']&&allTags[j].attributes['v-model'].value===this.attributes['v-model'].value){
                                   allTags[j].innerHTML = this.value
                                   allTags[j].value=this.value
                        }
                    }

                  } 
            })
        }
        
    }
    var allTags = document.body.getElementsByTagName('*')
  


    //响应式对象
    var obj = {
        b:0,
        c:'nmlgcb',
        nmlgcb:'diejdi'
        ,gs:'with nv'
     }

    // 为所有的变量添加响应式
    for(let n=0;n<Object.keys(obj).length;n++){
        //初始化赋值
        for(var h=0;h<allTags.length;h++){
            if (allTags[h].attributes['v-model']&&allTags[h].attributes['v-model'].value==Object.keys(obj)[n]){
                         allTags[h].innerHTML = obj[Object.keys(obj)[n]]
                         allTags[h].value = obj[Object.keys(obj)[n]]
                    }
        }
        //追踪变化
        var newVal = obj.b
        Object.defineProperty(
        obj,Object.keys(obj)[n],{
            set:function(val){
                console.log('响应式更新...',val);
                for(var r=0;r<allTags.length;r++){
                    if (allTags[r].attributes['v-model']&&allTags[r].attributes['v-model'].value==Object.keys(obj)[n]){
                         allTags[r].innerHTML = val
                         allTags[r].value = val
                         newVal = val
                    }
                }
               
            },
            get:function(){
                return newVal
            }
            }
    )
    }
   setInterval(
      ()=>{
            obj.b++
        }
   ,1000)

</script>
</html>