简单的双向数据绑定

<!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. 第09章 MySQL子查询

    第09章 MySQL子查询 子查询指一个查询语句嵌套在另一个查询语句内部的查询,这个特性从MySQL 4.1开始引入. SQL 中子查询的使用大大增强了 SELECT 查询的能力,因为很多时候查询需要 ...

  2. es基本概念

    电商实时数据分析平台需要学些什么?  [运营指标,流量指标,销售转化指标,客户价值指标,商品指标,营销指标,风险控制指标,市场竞争指标]等电商指标数据. 检索,数据更新,排序,分词,query等缓存机 ...

  3. BehaviorTree.CPP行为树BT的选择节点（四）

    Fallback 该节点家族在其他框架中被称为"选择器Selector"或"优先级Priority". 他们的目的是尝试不同的策略,直到找到可行的策略. 它们具 ...

  4. arthas 简单使用

    简介 Arthas 是Alibaba开源的Java诊断工具,深受开发者喜爱. 官网地址:https://arthas.aliyun.com/ 它可以做什么,以下功能都是直接操作线上跑着的jar包!!! ...

  5. 模数不超过 long long 范围时的快速乘

    笔者的话:使用前请确保评测系统的long double严格为16B ! 模数不在 int 范围内的乘法在 OI 中运用广泛,例如Millar-Rabin,Pollard-Rho等等.这样的乘法,直接乘 ...

  6. Anaconda 镜像配置

    镜像源 清华大学: https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ 北京外国语大学: https://mirrors.bfsu.edu.cn/h ...

  7. python 字典 key 对应多个 value

    基本思路是,将key对应的value设置为list,将对应的值append进去. 示例: f=open("a1.txt") ha={} for i in f: i=i.strip( ...

  8. Linux—yum的python版本错误——高级解决方案

    彻底搞明白,python升级后,为什么会导致yum不可用 首先我们来分析下,python升级后,yum为什么会不可用? 先说个关于python的问题,Linux系统很多软件都依赖于python,因此不 ...

  9. Excel-姓名列中同一个人汇总金额列，得出总金额

    8.姓名列中同一个人求和金额列,得出总金额. 方法一: P2处公式=SUMPRODUCT(($M$2:$M$20=$M2)*($N$2:$N$20)) 解释函数: 引用:https://zhinan. ...

  10. Linux命令行批量删除文件（目录）

    快速-批量删除文件或目录 1-1.快速删除大文件夹(注意目录后的结束符'/')(对于含有海量文件的目录,不能直接rm -rf删除,这样效率很慢:) rsync -a --delete blank/ t ...