<scripttype="text/javascript"> //构造函数 实现 DOM 和 data 的双向绑定 function Obj(data) { # 不使用name, 只使用v-model属性也能锁定目标元素 var models = document.querySelectorAll('input[v-model]') var that = this models.forEach(function(model){ //DOM ==> data 的绑定 //当input中的数据改变, data中的数据随之改变 model.addEventListener('input',function(e){ data[model.name] = e.target.value })
// data ==> DOM 的绑定 // 当data改变(注意这里data的改变是通过构造函数的实例ob来代理的), input中的值随之改变 Object.defineProperty(that, model.name, { set: function(val) { data[model.name] = val model.value = val }, get: function() { return data[model.name] } }) }) } </script> <scripttype="text/javascript"> var data = {}; var ob = newObj(data); </script> </body> </html>