美文网首页
利用存取器 实现dom和对象的数据双向绑定

利用存取器 实现dom和对象的数据双向绑定

作者: 流动码文 | 来源:发表于2017-11-29 18:28 被阅读2次

利用存取器,可以实现数据对象与DOM对象的双向绑定。

Object.defineProperty(user, 'name', {
  get: function () {
    return document.getElementById('foo').value;
  },
  set: function (newValue) {
    document.getElementById('foo').value = newValue;
  },
  configurable: true
});

上面代码使用存取函数,将DOM对象foo与数据对象user的name属性,实现了绑定。两者之中只要有一个对象发生变化,就能在另一个对象上实时反映出来。

相关文章

  • 利用存取器 实现dom和对象的数据双向绑定

    利用存取器,可以实现数据对象与DOM对象的双向绑定。 上面代码使用存取函数,将DOM对象foo与数据对象user的...

  • JS双向数据绑定

    双向数据绑定简述 双向数据绑定,可以将JS对象的属性绑定到DOM节点上,实现JS对象跟DOM节点的同名属性的关联,...

  • 前端理论面试--VUE

    vue双向绑定的原理(详细链接) VUE实现双向数据绑定的原理就是利用了 Object.definePropert...

  • vue数据双向绑定的实现原理

    vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取...

  • 双向绑定的原理

    VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取...

  • 双向数据绑定原理

    VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取...

  • 2018-01-19

    在AngularJs中,使用jQuery添加dom对象来使用数据双向绑定失效。 $(document).on("c...

  • vue笔记-v-model指令学习(四)

    v-model实现了数据和表单标签的双向绑定。 示例代码: 通过v-model的双向数据实现简易计算器:

  • vue双向数据绑定原理

    vue实现双向数据绑定理解,可以简单分为四个过程实现一个监听器Observer:对数据对象进行遍历,包括子属性对象...

  • Android Jetpack系列--4.DataBinding

    定义 即数据绑定,使数据对象和xml布局绑定,支持双向绑定,是Android团队实现MVVM架构的一种方法; 优点...

网友评论

      本文标题:利用存取器 实现dom和对象的数据双向绑定

      本文链接:https://www.haomeiwen.com/subject/grepbxtx.html