简单的双向数据绑定

<!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. Redis 源码简洁剖析 02 - SDS 字符串

    C 语言的字符串函数 C 语言 string 函数,在 C 语言中可以使用 char* 字符数组实现字符串,C 语言标准库 string.h 中也定义了多种字符串操作函数. 字符串使用广泛,需要满足: ...

  2. 如何隐藏shell脚本内容

    从事 Linux 开发的同学,经常需要编写 shell 脚本,有时脚本中会涉及到一些敏感内容,比如一些 IP 地址,用户名以及密码等,或者脚本中有一些关键的代码, 所有这些内容你都不想别人阅读或者修改 ...

  3. 洛谷 P6189 - [NOI Online #1 入门组]跑步（根号分治+背包）

    题面传送门 题意: 求有多少个数列 \(x\) 满足: \(\sum x_i=n\) \(x_i\geq x_{i+1}\) 答案对 \(p\) 取模. ...你确定这叫"入门"组 ...

  4. 解决Package is not available (for R version XXX)？

    目录 1. 更新R(不推荐) 2. 更改或指定镜像源 3.源码安装 安装R包时这个错误是经常见到的.我认为有几个方法可解决,记录之. 1. 更新R(不推荐) 简单粗暴的方法就是更新R,但这波及的范围太 ...

  5. [R] 如何快速生成许多差异明显的颜色？

    这个需求真的太常见了!注意问题强调的几个关键词:一是快速,二是大量,三是差异明显.在生成大量元素比较图时要明显区分不同样本,比如宏基因组中的物种分析: 方法一:自定义 自定义颜色:优点是选择差异明显的 ...

  6. MYSQL5.8----M3

    333333333333333333333333333 mysql> DESC user; +----------+---------------------+------+-----+---- ...

  7. Rust 指定安装目录

    集群home目录被管理员限制了存储空间,rust安装要100多M,默认安装home目录下,查了一圈,没找到rust指定安装目录的办法. 这里记录下解决办法: 在想要安装的目录执行 mkdir -p c ...

  8. 进程和线程操作系统转载的Mark一下

    https://www.cnblogs.com/leisure_chn/p/10393707.html Linux的进程线程及调度 本文为宋宝华<Linux的进程.线程以及调度>学习笔记. ...

  9. 修改unittest源码之tearDown

    需求 最近在写selenium自动化平台,想把每条用例后面都带上截图,最开始是每条用例加上封装好的截图函数,但是发现太麻烦,就决定加在tearDown函数里面,每条用例结束后执行截图操作. 那么问题来 ...

  10. 自动化测试系列（三）|UI测试

    UI 测试是一种测试类型,也称为用户界面测试,通过该测试,我们检查应用程序的界面是否工作正常或是否存在任何妨碍用户行为且不符合书面规格的 BUG.了解用户将如何在用户和网站之间进行交互以执行 UI 测 ...