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>

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

  1. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  2. JS实现数据双向绑定

    本文参考https://www.cnblogs.com/tianhaining/p/8425345.html 首先先说个面试题哈,就是vue中的v-model是如何实现双向数据绑定的咳咳,下面开始背诵 ...

  3. 原生js实现数据的双向绑定

    原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...

  4. 通过原生js实现数据的双向绑定

    通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...

  5. 用原生 JS 实现双向绑定及应用实例

    写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...

  6. 原生js实现双向数据绑定

    一.两个model之间的双向绑定 var o = { a: 0 } o.b = o.a + 1; console.log(o.a); // "0" console.log(o.b) ...

  7. 真正的原生JS数据双向绑定(实时同步)

    真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...

  8. Ajax进阶之原生js与跨域jsonp

    什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create ...

  9. 原生js 与 jQuery对比

    1.原生JS与jQuery操作DOM对比  :   https://www.cnblogs.com/QianBoy/p/7868379.html 2.比较jQuery与JavaScript的不同功能实 ...

随机推荐

  1. 性能测试学习 第七课 --loadrunner中JavaVuser脚本的编写

    1.环境准备:      LoadRunner11----->对应JDK1.6版本(32位) LoadRunner12----->对应JDK1.7版本(32位) (一).JDK下载安装完成 ...

  2. ps入门学习

    快捷键 打开 ctrl+O 切换显示窗口 ctrl+tab 隐藏工具栏和面板  tab 只隐藏面板不隐藏工具栏  shift+tab 切换屏幕模式  F 文件的新建与格式 1.新建文档Ctrl+N,存 ...

  3. [Swift]LeetCode142. 环形链表 II | Linked List Cycle II

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. Note ...

  4. [Swift]LeetCode784. 字母大小写全排列 | Letter Case Permutation

    Given a string S, we can transform every letter individually to be lowercase or uppercase to create ...

  5. [Swift]LeetCode921.使括号有效的最少添加 | Minimum Add to Make Parentheses Valid

    Given a string S of '(' and ')' parentheses, we add the minimum number of parentheses ( '(' or ')', ...

  6. Redis 设计与实现 （九）--Lua

    EVAL script numkeys key [key ...] arg [arg ...] script:     你的lua脚本 numkeys:  key的个数 key:           ...

  7. Java进阶——带你入门分布式中的Nginx

    如何实现服务器之间的协同功能呢? 通过 Nginx 提供的反向代理和负载均衡功能,可以合理的完成业务的分配,提高网站的处理能力:同时利用缓存功能,还可以将不需要实时更新的动态页面输出结果,转化为静态网 ...

  8. P5241 序列

    分析 题目要求在一共加入若干条边是的不同B序列的个数:方便统计,我们不妨让一个B序列对应一种特定的操作来构造,具体如下 从1开始按从小到大加入点,始终维护一个顺序为加点次序的链:每次加入一条有向边 不 ...

  9. python日志syslog运用

    syslog的官方说明在: https://docs.python.org/2/library/syslog.html#module-syslog 该模块的主要方式为: #!/usr/bin/pyth ...

  10. Java8 新特性 | 如何风骚走位防止空指针异常

    文章整理翻译自 https://winterbe.com/posts/2015/03/15/avoid-null-checks-in-java/ 文章首发于个人网站: https://www.exce ...