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. ReactJs和React Native的联系和差异

    1,React Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中解脱出来,只需要操作数据就会改变相 ...

  2. ReactNative问题随记1 Exception in thread "main" java.lang.RuntimeException: gradle-2.14.1-all.zip

    ReactNative问题随记 想运行在真机上,在运行命令react-native run-android遇到错误如下: Scanning 559 folders for symlinks in D: ...

  3. 全面盘点当前Android后台保活方案的真实运行效果（截止2019年前）

    本文原作者“minminaya”,作者网站:minminaya.cn,为了提升文章品质,即时通讯网对内容作了幅修订和改动,感谢原作者. 1.引言 对于IM应用和消息推送服务的开发者来说,在Androi ...

  4. [SQL]LeetCode178. 分数排名 | Rank Scores

    Write a SQL query to rank scores. If there is a tie between two scores, both should have the same ra ...

  5. Hibernate框架笔记04HQL_QBC查询详解_抓取策略优化机制

    目录 1. Hibernate的查询方式 1.1 方式一:OID查询 1.2 方式二:对象导航查询 1.3 方式三:HQL方式 1.4 方式四:QBC查询 1.5 方式五:SQL查询 2. 环境搭建 ...

  6. JVM基础系列第10讲：垃圾回收的几种类型

    我们经常会听到许多垃圾回收的术语,例如:Minor GC.Major GC.Young GC.Old GC.Full GC.Stop-The-World 等.但这些 GC 术语到底指的是什么,它们之间 ...

  7. LinkedHashMap 底层分析

    众所周知 HashMap 是一个无序的 Map,因为每次根据 key 的 hashcode 映射到 Entry 数组上,所以遍历出来的顺序并不是写入的顺序. 因此 JDK 推出一个基于 HashMap ...

  8. 【Zara原创】SqlSugar4轻量级ORM框架的使用指南

    前言:sqlSugar出生已经有3年之久了,从1.0到现在的4.x的版本,为了以后方便使用SqlSugar,所以特意花了2个小时来叙述它. 关于SqlSugar 性能:性能最好的ORM之一,具有超越D ...

  9. Python爬虫入门教程 28-100 虎嗅网文章数据抓取 pyspider

    1. 虎嗅网文章数据----写在前面 今天继续使用pyspider爬取数据,很不幸,虎嗅资讯网被我选中了,网址为 https://www.huxiu.com/ 爬的就是它的资讯频道,本文章仅供学习交流 ...

  10. 在Mac上使用远程X11应用

    XWindows太老了,历史比Windows和Linux的开发时间都长,以至于很多人每天实际在用,但已经不知道它的存在. XWindows目前是Linux/类Unix系统上的标准显示配置,QT/GTK ...