简单的双向数据绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<input type="text" id="aa"/>

<span id="bb" style="border: 2px solid orange;margin-left: 20px;">{{hello}}</span>

<br>

<br>

<input type="text" id="cc"/>

<script>

    // 双向数据绑定的原理：属性拦截

    // 属性拦截实现方式 ： 使用Object.defineProperty()将对象的属性变成访问器属性。

    var obj = {};

    Object.defineProperty(obj, 'hello', {

        enumerable: true,

        configurable: true,

        get: function () {

            return document.getElementById('aa').value;

        },

        set: function (val) {

            document.getElementById('bb').innerHTML = obj.hello;

            document.getElementById('cc').value = obj.hello;

        }

    });

    Object.defineProperty(obj, 'hello2', {

        enumerable: true,

        configurable: true,

        get: function () {

            return document.getElementById('cc').value;

        },

        set: function (val) {

            document.getElementById('aa').value = obj.hello2;

            document.getElementById('bb').innerHTML = obj.hello2;

        }

    });

    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>

单项数据绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<input type="text" id="aa"/>

<span id="bb" style="border: 2px solid orange;margin-left: 20px;">{{hello}}</span>

<script>

    // 双向数据绑定的原理：属性拦截

    // 属性拦截实现方式 ： 使用Object.defineProperty()将对象的属性变成访问器属性。

    var obj = {};

    Object.defineProperty(obj, 'hello', {

        enumerable: true,

        configurable: true,

        get: function () {

            return document.getElementById('aa').value;

        },

        set: function (val) {

            document.getElementById('bb').innerHTML = obj.hello;

        }

    });

    document.getElementById('aa').onkeyup = function () {

        obj.hello = this.value;

    };

    obj.hello = ""; //属性名必须设置为空，否则在使用插值表达式的时候直接会把插值表达式显示出来

</script>

</body>

</html>

JS 双向数据绑定、单项数据绑定的更多相关文章

  1. Angular JS - 3 - Angular JS 双向数据绑定

    一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...

  2. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  3. angular-dragon-drop.js 双向数据绑定拖拽的功能

    在做公司后台物流的时候,涉及到34个省市分为两个部分,一部分为配送区域,另一部分为非配送区域,想利用拖拽的功能来实现,最好两部分的数组能自动更新. 刚好找到angular-dragon-drop.js ...

  4. Vue.js双向数据绑定模板渲染

    准备知识 1. 前端开发基础 html.css.js2. 前端模块化基础3. 对ES6有初步的了解 vuejs官网:cn.vuejs.org HTML: <!DOCTYPE html> & ...

  5. js控制select下拉列表数据绑定

    JS代码部分:  <script type="text/javascript"> $(document).ready(function () { $("sel ...

  6. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  7. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  8. 很easy的js双向绑定框架（二）：控制器继承

    初衷 上一篇已经实现了数据的双向绑定,但model的控制范围是整个文档.在实际project中必需要有作用范围,以便做ui模块的拆分. 这一篇,我们希望实现像angularjs一样的控制器继承: 1. ...

  9. vue.js双向绑定之--select获取text

    在大多数情况下select下拉菜单都是value和text设置不同的值的,value一般来说是与后台交互的值,而text是前端用来显示的文本: 但是,vue.js对到表单的双向绑定时如果option设 ...

随机推荐

  1. 深度揭秘Netty中的FastThreadLocal为什么比ThreadLocal效率更高？

    阅读这篇文章之前,建议先阅读和这篇文章关联的内容. 1. 详细剖析分布式微服务架构下网络通信的底层实现原理(图解) 2. (年薪60W的技巧)工作了5年,你真的理解Netty以及为什么要用吗?(深度干 ...

  2. LRU缓存

    LRU缓存 struct Node{ int key; int value; Node* next; Node* pre; Node(): key(-1), value(-1), next(nullp ...

  3. 前台json遍历拼装

    //添加角色. $.ajax({ type: "post", url: "/sysRole/list", data: {page: 1, limit: 1000 ...

  4. git分支切换的一些问题

    关于git切换分支后该分支的修改会在另一个分支里面一起修改的问题 修改分支后导致稳定版的主分支里面的文件连带修改. 原因:切换分支前原分支没有提交,导致新建的文件或者文件夹,没有纳入版本管理,所以会被 ...

  5. 贪心/构造/DP 杂题选做Ⅱ

    由于换了台电脑,而我的贪心 & 构造能力依然很拉跨,所以决定再开一个坑( 前传: 贪心/构造/DP 杂题选做 u1s1 我预感还有Ⅲ(欸,这不是我在多项式Ⅱ中说过的原话吗) 24. P5912 ...

  6. P5509 派遣

    题面传送门. 数论小杂烩( 由题意,对于每个士兵 \(i\),要么选,对答案产生 \(a_i(\frac{x}{i-x})\) 倍的贡献,要么不选,对答案产生 \(1\) 倍的贡献. 由此可知每个士兵 ...

  7. 区分wsgi、uWSGI、uwsgi、php-fpm、CGI、FastCGI

    在学习Python web开发时候,可能会遇到诸如uwsgi,wsgi等名词,下面通过梳理总结探究它们之间的关系. CGI CGI,(Common Gateway Interface)通用网关接口,是 ...

  8. mysql—MySQL数据库中10位时间戳转换为标准时间后，如何对标准时间进行加减X天处理

    在这篇的缘由:问题:"FROM_UNIXTIME(timeline,'%Y-%m')"的结果(2020-06)做月份增加1月或者减少1月的计算处理,想着直接在结果上+1但是,结果为 ...

  9. 单片机ISP、IAP和ICP几种烧录方式的区别

    单片机ISP.IAP和ICP几种烧录方式的区别 玩单片机的都应该听说过这几个词.一直搞不太清楚他们之间的区别.今天查了资料后总结整理如下. ISP:In System Programing,在系统编程 ...

  10. java中接口可以继承接口

    今天阅读别人的代码才发现,接口是可以继承接口的 一个类只能extends一个父类,但可以implements多个接口. 一个接口则可以同时extends多个接口,却不能implements任何接口. ...