原生JS实现双向绑定

最新推荐文章于 2023-02-17 20:19:06 发布
最新推荐文章于 2023-02-17 20:19:06 发布
阅读量584 收藏 2
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DurianPudding/article/details/88199542
版权

现在框架都可以实现双向绑定，vue中实现双向绑定的原理是利用Object.defineProperty

定义访问器属性要使用Object.defineProperty，接收三个参数：属性所在的对象，属性的名字，一个描述符对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" id="txt">
  <p id="show-txt"></p>
</div>
<script>
  var obj = {};

  // obj为content属性所在的对象，content为obj对象的属性
  // get 读取访问器属性返回有效的值；set 传入新值
  Object.defineProperty(obj, 'content', {
    get: function () {
      return obj
    },
    set: function (newValue) {
      document.getElementById('txt').value = newValue
      document.getElementById('show-txt').innerHTML = newValue
    }
  });

  // keyup 键被松开
  document.addEventListener('keyup', function (e) {
    // 通过监听keyup事件，用目标值为obj.content赋值
    obj.content = e.target.value
  });

</script>
</body>

</html>

addEventListener

DurianPudding
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现数据双向绑定
Hec990的博客
03-18 619
MVVM模式 MVVM 对应 3个组成部分，Model（模型）、View（视图） 和 ViewModel（视图模型） View 是用户在屏幕上看到的结构、布局和外观。 ViewModel是一个绑定器，能和 View 层和 Model 层进行通信。 Model则是数据和逻辑。 当View视图发生变化，会通过ViewModel绑定器反应到Model视图模型，Model也会跟着变化。反则Model视图模型变化，View视图也会随着变化。 一、Vue中的双向绑定 <!DOCTYPE html> &
原生js实现双向数据绑定
weixin_47710463的博客
03-05 572
双向数据绑定原理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双向数据绑定</title> </head> <body> <input id="inp" value=""> <p id="text"></p> </body> <scr
使用原生js实现数据的双向绑定
m0_60676278的博客
02-17 337
Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。关于vue的双向数据绑定，其核心是 Object.defineProperty()方法。使用原生js实现数据的双向绑定。obj：需要定义属性的当前对象。prop：当前需要定义的属性名。desc：具体的改变方法。
基于原生JS和订阅发布者模式的数据双向绑定
weixin_41329634的博客
07-18 438
双向绑定相信大家都耳熟能详，即ViewModel中的data部分和View之间的双向关系，数据可以驱动视图，视图页面的改变也可以反向来更改数据。这篇文章先做一个利用原生JS与订阅发布者模式来实现的简单双向绑定.........
原生js实现数据双向绑定
big_beer的博客
12-31 2531
双向绑定 使用原生js实现数据的双向绑定。 关于vue的双向数据绑定，其核心是 Object.defineProperty()方法 Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性 Object.defineProperty(obj, prop, desc) obj：需要定义属性的当前对象。 prop：当前需要定义的属性名。 desc：具体的改变方法。 <!DOCTYPE html> <html> <head&
js——纯js模拟双向数据绑定
Juliet_xmj的博客
03-19 839
js——纯js模拟双向数据绑定 是不是很多人只是知道双向数据绑定的实现效果，并不知道其原理，或是知道其原理并不明白的， 使用js模拟一个简单的双向数据绑定案例吧，就会变得容易理解 Object.defineProperty() vue双向数据绑定的原理就是它了 html： <div class='box'> // input输入框最能体现双向数据绑定的效果了 <input type='text' id='txt' /> // 输入内容会同步显示在这里 <p i
JS原生数据双向绑定实现代码
10-19
总结一下，这个JS原生数据双向绑定的实现原理如下： 1. 使用发布/订阅模式实现事件的分发。 2. 通过`data-*`属性将HTML元素与数据模型关联起来。 3. 监听`input`事件，当用户在输入框中做出改变时，更新模型。 4. ...
原生JS双向数据绑定实现
07-31
*原生JS双向数据绑定实现 *@author wall *@date 2018-06-20 *@desc 实现可配置属性的双向数据绑定 *使用说明: *1.声明全局对象:如 * var test = { * topInfo: { * name:"张三", * age:18, * width:400 ...
原生js实现vue数据双向绑定.zip
03-08
这个"原生js实现vue数据双向绑定.zip"文件很显然是为了帮助我们理解Vue.js中数据双向绑定背后的原理，并尝试用纯JavaScript来模拟实现这一功能。下面我们将深入探讨Vue的数据绑定机制以及如何用原生JS进行模拟。 ...
实现非常简单的js双向数据绑定
10-23
Angular实现了双向绑定机制。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。本文给大家详细介绍js双向数据绑定，感兴趣的朋友参考下
js实现倒计时
09-20
javascript实现倒计时
用原生JS模拟双向绑定
cceking的博客
07-29 1579
用原生JS模拟双向绑定 双向绑定 看到angular的双向绑定，想模拟实践下，当然运行效率是硬伤。 angular的双向绑定是通过$watch实现的，如$scope的变量都会保存到$$watchers数组中，然后添加$watch监听，实现双向绑定。(关于angular的$watch可自行) 顺便说一句，调试时修改angular里面的变量可以通过angular.element('.myapp...
用原生js实现数据双向绑定
weixin_46847662的博客
09-20 983
数据的双向绑定是当视图区的内容变化时，后台与之对应的内容也相应的变化， 反之亦然.。比如现在视图区有一个input输入框，改变输入框的内容时，后台与之对应的内容也会改变；改变后台内容时，输入框的内容也会相应的改变。 实现双向绑定需要使用Object的defineProperty方法和事件，用来监听数据的变化以进行数据的同步改变。代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
js 双向绑定
weixin_34419326的博客
05-20 130
//双向绑定实例 <input name="" ng-bind-123="name" /> function DataBinder( object_id ) { // Create a simple PubSub object var pubSub = { callbacks: {}, ...
js实现双向数据绑定
前端开发技术
12-08 883
&lt;div class="app"&gt; &lt;input type="demo" shawn-model="demo" spellcheck="true"&gt; &lt;p shawn-text="sha"&gt;&lt;/p&gt; &lt;p shawn-text="demo"
JavaScript数据结构之 —— 04单向链表
邪人君子的博客
08-05 221
链表是由一组节点组成的集合。每个节点都使用一个对象的引用指向它的后继。指向另一个节点的引用叫做链。 插入节点：修改它前面的节点（前驱），使其指向新加入的节点，而新加入的节点则指向原来前驱指向的节点。 删除节点：将待删除元素的前驱节点指向待删除元素的后继节点，将待删除元素指向 null，元素就删除成功了。 单向链表 单向链表包含两个类。Node 类用来表示节点，LinkedList 类提供了插入...
html+css+js实现图片轮播
热门推荐
Zhangeq的博客
11-20 1万+
html代码 原理是通过 overflow: hidden; 将ul的宽带属性设置为轮播图片的个数*100%，从而这个属性来使得div中只充斥 一个li；通过js让margin-left的值改变来实现图片轮播； &lt;body&gt; &lt;div class="warp"&gt; &lt;div class="broadcast" id="broadcast"&gt..
原生JS实现双向数据绑定
m0_46101895的博客
02-25 273
//html部分 <input type="text" id="foo"> <p id="test"></p> //js部分 <script> var user = { get inputValue() { return document.getElementById('foo').value }, set inputValue(value) { document.getElementById('foo').value = val
原生js怎么实现双向绑定
最新发布
05-24
实现双向绑定可以借助 Object.defineProperty 方法来实现具体步骤如下： 1. 创建一个对象，给该对象设置一个属性，该属性的值为需要双向绑定的。 2. 使用 Object.defineProperty 方法来监听该对象的属性变化，在 getter 函数中返回该属性的值，在 setter 函数中对该属性进行赋值，并且在赋值时触发一个回调函数。 3. 在页面中设置一个表单元素，例如 input 元素，将其 value 属性与该对象的属性进行绑定，这样当表单元素的值发生变化时，就会触发 setter 函数，从而触发回调函数，实现双向绑定。 下面是一个简单的示例代码： ``` // 创建一个对象 var obj = {}; // 给该对象设置一个属性，该属性的值为需要双向绑定的值 var value = 'Hello World!'; Object.defineProperty(obj, 'text', { get: function() { return value; }, set: function(newValue) { value = newValue; // 触发回调函数，更新页面 updateView(); } }); // 将表单元素与该对象的属性进行绑定 var input = document.getElementById('input'); input.value = obj.text; input.addEventListener('input', function() { obj.text = input.value; }); // 更新页面的函数 function updateView() { input.value = obj.text; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值