简单的双向数据绑定

<!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. 【从头到脚品读 Linux 0.11 源码】第一回 最开始的两行代码

    从这一篇开始,您就将跟着我一起进入这操作系统的梦幻之旅! 别担心,每一章的内容会非常的少,而且你也不要抱着很大的负担去学习,只需要像读小说一样,跟着我一章一章读下去就好. 话不多说,直奔主题.当你按下 ...

  2. vs2012换肤功能，vs2012主题及自定义主题

    vs2012 默认的主题只有浅色和深色两种,深色太黑了,浅色又太亮了!怎么办? 研究不少时间终于找到了怎么编辑vs2012的皮肤 现在开始吧 打开vs2012-工具--扩展和更新 在联机中搜索 The ...

  3. [atARC062F]Painting Graphs with AtCoDeer

    求出点双后缩点,对于点双之间,显然不存在简单环,即每一个简单环一定在一个点双内部,换言之即每一个点双可以独立的考虑,然后将结果相乘 (对于点双之间的边任意染色,即若有$s$条边,还会有$k^{s}$的 ...

  4. [loj3341]时代的眼泪

    题意即求在区间$[l,r]$中且权值在$[x,y]$中的逆序对个数 考虑分块,逆序对个数包含4部分: 1.左/右块外内部,预处理出$i$到其所在块的块首/尾,小于/小于等于$j$(需要对$j$离散)的 ...

  5. [loj3246]Cave Paintings

    题中所给的判定条件似乎比较神奇,那么用严谨的话来说就是对于两个格子(x,y)和(x',y'),如果满足:1.$x\le x'$:2.从(x,y)通过x,x+1,--,n行,允许向四个方向走,不允许经过 ...

  6. 智能 Request 推荐，K8s 资源利用率提升 252%

    作者 王孝威,FinOps 认证从业者,腾讯云容器服务产品经理,热衷于为客户提供高效的 Kubernetes 使用方式,为客户极致降本增效服务. 余宇飞,FinOps 认证从业者,腾讯云专家工程师,从 ...

  7. MySQL数据库之大厂面试必备技能v8.0.27

    概述 **本人博客网站 **IT小神 www.itxiaoshen.com 定义 MySQL官方地址 https://www.mysql.com/ MySQL 8系列最新版本为8.0.27,5系列的最 ...

  8. R数据科学-3

    R数据科学(R for Data Science) Part 3:编程 转换--可视化--模型 --------------第13章 使用magrittr进行管道操作----------------- ...

  9. python-django使用ORM模型增删改查CRUD

    from weibo.models import WeiboUser as User user_obj = User.objects.get(pk=1) user_obj.pk Out[4]: 1 u ...

  10. 一个画组织解剖图R包

    地址: https://github.com/jespermaag/gganatogram