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. Maven插件一览

    maven-assembly-plugin 将对应模块依赖在  mvn package 阶段全部打到一个 jar 包里面: java -cp xx.jar package.name.MainClass ...

  2. 东软实习<3>

    今天学习过程和小节 主要对多线程,单例模式以及jdbc进行了一些深入着重的学习, 还有就是学习了如何使用java操作HDFS 主要是对于一些继承调用的使用等 1.封装JDBC,自定义范型 2.反射,自 ...

  3. Python实现实现基于最小二乘法的线性回归

    下面展示利用Python实现基于最小二乘法的线性回归模型,同时不需要引入其他科学计算以及机器学习的库. 利用Python代码表示如下: #首先引入数据集x,和y的值的大小利用Python的数据结构:列 ...

  4. 【RL-TCPnet网络教程】第25章 DHCP动态主机配置协议基础知识

    第25章      DHCP动态主机配置协议基础知识 本章节为大家讲解DHCP(Dynamic Host Configuration Protocol,动态主机配置协议),通过前面章节对TCP和UDP ...

  5. java中的堆，栈和方法区（转）

    来源:https://www.cnblogs.com/iliuyuet/p/5603618.html https://blog.csdn.net/lin542405822/article/detail ...

  6. [Swift]LeetCode331. 验证二叉树的前序序列化 | Verify Preorder Serialization of a Binary Tree

    One way to serialize a binary tree is to use pre-order traversal. When we encounter a non-null node, ...

  7. [Swift]LeetCode416. 分割等和子集 | Partition Equal Subset Sum

    Given a non-empty array containing only positive integers, find if the array can be partitioned into ...

  8. django中的跨表查询梳理

    1.前言 最近在写一个小项目,里面主要涉及的就是表与表之间复杂的关系.当真正开发起来的时候,才发现自己对复杂的表关系间的查询有点混乱,趁着这几天的时间,重新梳理了一下. 2.概念 在开始之前,先明确几 ...

  9. Java学习目录(持续更新中)

  10. 阿里云服务器公网Ip外网无法访问

    拥有了自己的服务器后,发现需要各种配置,之前应用公司的服务器的时候,一般通过内网访问,或者外网访问时,很多配置其他人员都已经配置好了,但是现在在自己的服务器上发布自己的网站的时候,才发现事情并没有自己 ...