双向数据绑定面试一般都会问到,首先要了解访问器属性用法,时间关系,先贴代码,有时间了分析一下 ,希望本文能帮助到大家。
Object.defineProperty(obj,propertyName,{ get:function(){ //读取obj对象的propertyName属性时执行 }, set:function(currvalue){ //修改obj对象的propertyName属性时执行 }, });
登录后复制
nbsp;html>js实现vue双向数据绑定 利用访问器属性 var elems=[document.getElementById('user-input'),document.getElementById('show-input')]; var data={ initValue:'', }; function define(obj,propertyName) { Object.defineProperty(obj,propertyName,{ get:function(){ return this.initValue; }, set:function(currvalue){ this.initValue=currvalue; //同步p scan(); }, }); } define(data,'value'); data.value=''; scan(); //监听事件 elems[0].addEventListener('keyup',function(e){ var e=e||window.event; data.value=e.target.value; }); function scan(){ for(var i=0;i<elems.length;i++){ var ele=elems[i]; for(var j=0;j=0){ elems[1].innerHTML=data.value; elems[0].setAttribute('current-values',data.value); } } } }
登录后复制
相关推荐:
Vue双向数据绑定源码分析
js实现双向数据绑定的方法
前端之js双向数据绑定
以上就是js代码实现vue双向数据绑定实例的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2785924.html