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. 为bootstrap+angularJs打造的表格代码生成器

    private void btnCreateCode_Click(object sender, EventArgs e) { string objName = txtObjName.Text; if ...

  2. spring boot 集成 Redis

    前提:你已经安装了Redis 1.创建一个spring boot 工程 2.pom 引入依赖:spring-boot-starter-data-redis <dependency> < ...

  3. muse-ui底部导航自定义图标和字体颜色

    最近在鼓捣用vue.js进行混合APP开发,遍寻许久终于找到muse-ui这款支持vue的轻量级UI框架,竟还支持按需引入,甚合萝卜意! 底部导航的点击波纹特效也是让我无比惊喜,然而自定义图标和字体颜 ...

  4. react 引用 layer （防忘记）

    1.先到 百度静态资源公共库 (http://cdn.code.baidu.com/)找到jquery和layer地址 2.找到./public/index.html 引入jquery和layer 3 ...

  5. Lesson 27 A wet night

    Text Late in the afternoon, the boys put up their tent in the middle of a feild. As soon as this was ...

  6. 用R处理一组数据的三种方式

    USArrests是R附带的一个数据集,现在我们需要创建一个factor向量urbancat,如果UrbanPop列的某个值在中位数之上,就把urbancat对应位置的值设为1,否则设为0. 这种数据 ...

  7. 七种经典排序算法及Java实现

    排序算法稳定性表示两个值相同的元素在排序前后是否有位置变化.如果前后位置变化,则排序算法是不稳定的,否则是稳定的.稳定性的定义符合常理,两个值相同的元素无需再次交换位置,交换位置是做了一次无用功. 下 ...

  8. iOS URL Schemes与漏洞的碰撞组合

    iOS URL Schemes与漏洞的碰撞组合 前言 iOS URL Schemes,这个单词对于大多数人来说可能有些陌生,但是类似下面这张图的提示大部分人应该都经常看见: 今天要探究的就是:了解iO ...

  9. [Swift]LeetCode210. 课程表 II | Course Schedule II

    There are a total of n courses you have to take, labeled from 0 to n-1. Some courses may have prereq ...

  10. [Swift]LeetCode880. 索引处的解码字符串 | Decoded String at Index

    An encoded string S is given.  To find and write the decodedstring to a tape, the encoded string is ...