简单的实现双向数据绑定

最新推荐文章于 2024-05-16 13:03:53 发布

Cony Lee

最新推荐文章于 2024-05-16 13:03:53 发布

阅读量1.6k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43194434/article/details/106234070

版权

双向数据绑定的简单实现

对于数据的双向绑定用起来是真的便捷,但是一直不理解其中的原理,经过一番学习,终于有所收获,记录下来,仅供自己复习
首先需求: 界面上有输入框和一个P标签,自己实现基本的双向数据绑定
界面代码很简单,如下 :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="ppp"></p>
  <hr>
  <input type="text" id="ipt">
</body>
<script src="./2.js"></script>
</html>

表现如图:
在这里插入图片描述
在做之前我们需要知道的一个方法: Object.defineProperty()它的的作用是直接在一个对象上定义一个新的属性,或者修改一个已经存在的属性,用法: Object.defineProperty(obj, props, desc), 其中:

obj: 需要定义属性的当前对象
props: 当前准备定义的属性名
desc: 对定义属性的描述
那么我们今天就以一个对象Person为例,对其属性name来实现简单的双向绑定, 具体代码如下:

  var Person = {}
  var name = null
  Object.defineProperty(Person, 'name', {
    get: function () {
      return name
    },
    set: function (newV) {
      name = newV
    }
  })
  
  let p = document.getElementById('ppp')
  let ipt = document.getElementById('ipt')
  ipt.addEventListener('input', function (e) {
    Person.name = e.target.value
    p.innerText = Person.name
  })

我们通过 p.innerText = Person.name来出发给Person的get方法来获取属性name的值,通过Person.name = e.target.value来触发Person的set方法来设置属性name的值.效果如下:
在这里插入图片描述
基本上就实现了在input里面输入, 在P标签里显示实时更新的name的值.
这是最基本的实现,至于最深层次的原理及写法,还有待学习!

Cony Lee

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
简单的实现双向数据绑定

双向数据绑定的简单实现对于数据的双向绑定用起来是真的便捷,但是一直不理解其中的原理,经过一番学习,终于有所收获,记录下来,仅供自己复习首先需求: 界面上有输入框和一个P标签,自己实现基本的双向数据绑定界面代码很简单,如下 :<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
复制链接

扫一扫