标签:name 绑定 value let str 双向 input data
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div1"> <input type="text" v-model="name"><br> 姓名:{{name}}<br> 年龄:{{age}} </div> </body> <script> let el=document.getElementById('div1'); let template=el.innerHTML; let _data={ name: 'blue', age: 18 }; let data=new Proxy(_data, { set(obj, name, value){ //alert(`有人视图设置 ${name}=>${value}`); obj[name]=value; //数据变了 //console.log('数据变了'); render(); } }); render(); function render(){ //渲染 el.innerHTML=template.replace(/\{\{\w+\}\}/g, str=>{ str=str.substring(2, str.length-2); return _data[str]; }); //找所有的v-model Array.from(el.getElementsByTagName('input')) .filter(ele=>ele.getAttribute('v-model')) .forEach(input=>{ let name=input.getAttribute('v-model'); input.value=_data[name]; input.oninput=function (){ console.log(this); data[name]=this.value; }; }); } </script> </html>
标签:name,绑定,value,let,str,双向,input,data 来源: https://www.cnblogs.com/angdh/p/14826502.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。