原生js实现数据单向绑定

Object.defineProperty()方法直接在对象上定义一个新属性,或修改对象上的现有属性,并返回该对象。

Object.defineProperty(obj, prop, descriptor)

参数

  obj 定义属性的对象。
  prop 要定义或修改的属性的名称。

  descriptor 定义或修改属性的描述符。

  返回值 传递给函数的对象。
注意:数据描述符和访问器描述符,不能同时存在(value,writable 和 get,set)

  get:函数return将被用作属性的值。

  set:该函数将仅接收参数赋值给该属性的新值。(在属性改变时调用)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body><input type="text" id="aa"/>*<input type="text" id="cc"/><span id="bb">{{hello}}</span>

<script>   var obj = {};    Object.defineProperty(obj,‘hello‘,{        enumerable: true,        configurable: true,        get: function() { return document.getElementById(‘aa‘).value; },        set:function(val){            document.getElementById(‘bb‘).innerHTML = val*obj.hello2;        }    });   Object.defineProperty(obj,‘hello2‘,{       enumerable: true,       configurable: true,       get: function() { return document.getElementById(‘cc‘).value; },       set:function(val){           document.getElementById(‘bb‘).innerHTML = val*obj.hello;       }   });    document.getElementById(‘aa‘).onkeyup = function(){        obj.hello = this.value;    };   document.getElementById(‘cc‘).onkeyup = function(){       obj.hello2 = this.value;   };    obj.hello = "";    obj.hello2 = "";</script>

</body></html>
时间: 2024-08-14 14:45:05

原生js实现数据单向绑定的相关文章

原生js实现数据双向绑定

最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里 缺点:一旦HTML代码生成就没有办法改变,如果有新数据重新传入,就必须重新把模板和数据整合到一起插入到文档流中 数据双向绑定 数据模型和视图之间的双向绑定,用户在视图上的修改会自动同步到数据模型中,同样的,如果数据模型中的值发生变化,也会同步到视图中去

原生js跨浏览事件绑定(移除)/javascript事件绑定(移除)

网上找了半天没看到,都是基于ie attachEvent(有诸多的问题存在)来写的,所以手动写了个js模拟绑定事件希望能帮到需要的童鞋 addEvent = function(obj,type,fn){  if(obj.addEventListener) {//W3C   obj.addEventListener(type,fn,false);  }else if (obj.attachEvent) {//ie(期待它的灭亡)   if(!obj.events) obj.events = {};

js循环数据时绑定方法并将数据对象传递出来

代码是参考的layui的作者 贤心 的代码,其他的代码太多了,看的tree中的代码,虽然效果实现了,但是原理不是很清楚,因为涉及到闭包了,而我对于前段只知道基础的东西,对于深入的东西不是很清楚,所以,有幸看到的人,不要问我,我也不懂,嘿嘿 var dictype; $(function () { ajaxEx("/DictionaryInfo/GetDicType", {}, function (json) { if (json.Code == 0) { var data = json

Render函数(2):使用原生js替代自定义指令、修饰符、slot

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

记一次数据、逻辑、视图分离的原生JS项目实践

一切的开始源于这篇文章:一句话理解Vue核心内容. 在文章中,作者给出了这样一个思考: 假设现在有一个这样的需求,有一张图片,在被点击时,可以记录下被点击的次数. 这看起来很简单吧, 按照上面提到到开发方式,应该很快就可以搞定. 那么接下来,需求稍微发生了点变动, 要求有两张图片,分别被点击时,可以记录下各自的点击次数.这次似乎也很简单,只需把原先的代码复制粘贴一份就可以了. 那么当这个需求变成五张图片时,你会怎么做? 还是简单复制粘贴吧,这样完全可以完成这个需求,但是你会觉得很别扭,因为你的代

js实现数据的双向绑定

今天用原生js来实现一个数据的双向绑定 知识点:object.defineProperty() 三个参数: 第一个:要定义属性的对象, 第二个:要定义或者修改的属性的名称 第三个:将被定义或者修改的属性的描述 <input type="text" id="inp"/><p id="showText"></p> <script> var obj = {}; Object.defineProperty(

使用原生JS实现表格数据的翻页功能

使用原生JS实现如下图所示表格数据的翻页功能: HTML代码: <body> <div id="title"> <h1>表格标题</h1> </div> <table id="table" border="1"></table> <div id="pagination"> <button id="prev"

原生js绑定和解绑事件,兼容IE,FF,chrome

主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解除这个事件.贴上代码,这个是可以运行的,兼容 IE FF chrome 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu

angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. ‘参数’ 就是$scope对象下的一个对象