vue v-model響應式指令demo
阿新 • • 發佈：2022-04-19
<!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>