简单的双向数据绑定

<!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. python有关于图像的深度和通道

    目录: (一)图像的深度和图像的通道  (1)图像的深度  (2)图像的通道 (二)自定义一张多通道的图片 (1)zeros 函数 (2)ones  函数 (三)自定义一张单通道的图片 (四)像素操作 ...

  2. [zoj3990]Tree Equation

    记$dep(T)$为树$T$的深度(根节点深度为0),则有$\begin{cases}dep(A+B)=\max(dep(A),dep(B))\\dep(A\cdot B)=dep(A)+dep(B) ...

  3. [atARC119D]Grid Repainting 3

    将每一行和每一列分别作为一个点,当第$i$行第$j$列的格子为红色时,将第$i$行与第$j$列连边 此时,考虑选择第$i$行的红色格子并将第$i$行的格子全部改成白色: 关于这一操作的条件,即需要第$ ...

  4. Java 插入html字符串到PPT幻灯片

    通过Java后端代码操作PPT幻灯片时,可直接在幻灯片中绘制形状,并在形状中添加文本字符串内容.本篇文章,介绍一种通过html字符串来添加内容到PPT幻灯片的的方法,可添加文字.图片.视频.音频等.下 ...

  5. 析构函数与this指针

    二.析构函数 1.知识点介绍 析构函数和构造函数一样,也是一种特殊的函数,主要的作用是在对象结束生命周期时,系统自动调用析构函数,来做一些清理工作,比如在对象中有申请内存,那么是需要自己去释放内存的, ...

  6. C#使用Thrift作为RPC框架入门（三）之三层架构

    前言 这是我们讲解Thrift框架的第三篇文章,前两篇我们讲了Thrift作为RPC框架的基本用法以及架构的设计.为了我们更好的使用和理解Thrift框架,接下来,我们将来学习一下Thrift框架提供 ...

  7. 调试：'Object reference note set to an instance of an object.'

    今天调试代码遇到一个奇怪的问题,每次调试到 var files = new List<string>()这一行代码,总是报错:System.NullReferenceException: ...

  8. Mac Maven 安装及配置

    一.下载 打开 Maven 官方下载页面:https://maven.apache.org/download.cgi#,点击下载链接即可开始下载:     以 Maven 3.8.4 为例,解压后可以 ...

  9. P7045 「MCOI-03」金牌

    考虑维护一个队列. 先插入\(a_1 = 0\) 依次往后考虑,如果和队列里相斥,则我们把队列一个和他捆绑起来. 如果队列空,则加入该颜色. 最后考虑往队列里插入改颜色. 总共为\(2 * (n - ...

  10. LOJ #6044 -「雅礼集训 2017 Day8」共（矩阵树定理+手推行列式）

    题面传送门 一道代码让你觉得它是道给初学者做的题,然鹅我竟没想到? 首先考虑做一步转化,我们考虑将整棵树按深度奇偶性转化为一张二分图,即将深度为奇数的点视作二分图的左部,深度为偶数的点视作二分图的右部 ...