vue原理与实现-输入框 作者：马育民 • 2023-11-14 15:04 • 阅读：10043 # 说明 使用 JavaScript 模拟 Vue，实现渲染，数据改变时，能够同步显示到输入框上 ### html ``` <div id="app"> <input type="text" v-model="name" /> </div> ``` ### JavaScript ``` <script type="text/javascript"> var data = { name : "杜子腾" } var appHTML = document.getElementById("app").innerHTML // 用js实现vue的功能 // 渲染 document.querySelector('[v-model="name"]').value = data.name // 双向绑定之一，当data中的属性改变时，同步显示到网页上 // data 对象的 name 属性的 原值 var nameData = data.name // 监听 data 对象的 name属性 Object.defineProperty(data,"name",{ // 访问 data 的 name 属性时，就会触发执行该函数 get:function(){ return nameData }, // 改变 data 的 name 属性时，就会触发执行该函数 set:function(newValue){ nameData = newValue document.querySelector('[v-model="name"]').value = data.name // console.log(" name 的值改变了，新值是：",newValue) } }) // 双向绑定之二：输入框的内容改变时，修改 data 中的数据 document.querySelector('[v-model="name"]').addEventListener("keyup",function(e){ data.name = e.target.value }) </script> ``` 原文出处：http://www.malaoshi.top/show_1IX6b9ahXFVB.html