js——纯js模拟双向数据绑定

11 篇文章 0 订阅

js——纯js模拟双向数据绑定

是不是很多人只是知道双向数据绑定的实现效果,并不知道其原理,或是知道其原理并不明白的,
使用js模拟一个简单的双向数据绑定案例吧,就会变得容易理解

在这里插入图片描述

Object.defineProperty()

vue双向数据绑定的原理就是它了

Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。
方法参数:

Object.defineProperty(obj, prop, descriptor)

html:

<div class='box'>
  // input输入框最能体现双向数据绑定的效果了
  <input type='text' id='text' />
  // 输入内容会同步显示在这里
  <p id='showText'></p>
</div>

js:

var obj = {}
var write = document.getElementById('text')
var read = document.getElementById('showText')

// 参数obj指定修改的对象,参数'text'是添加或修改该对象text属性
Object.defineProperty(obj, 'text', {
// get 获取   重要
  get: function () {
    return obj
  },
 // set 修改    重要
 // 当属性发生改变时,将obj.text属性复制给同步显示的read元素节点
  set: function (val) {
    read.innerHTML = val
  }
})
// 监听input输入事件,keyup键盘事件中将Object.defineProperty中get到的obj数据赋值
write.addEventListener('keyup', function (e) {
  obj.text = e.target.value
})

监听input输入事件,keyup键盘事件中将Object.defineProperty中get到的obj数据赋值,形成最终双向数据绑定的效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值