通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新。

<h1 id="title">Hello</h1>
<input type="text" id="a" />

首先是在界面上更改input的值,需要监听input的“input”事件:

var input = document.getElementById("a"),
title = document.getElementById("title");
input.oninput = function (e) {
title.innerHTML = this.value;
};

如果是在代码中手动修改input.value属性,这时候最常规的方法是手动更新h1的文字:

input.value = '123';
title.innerHTML = input.value;

有没有办法能让我们在更新input的value值的时候,自动更新h1的文字呢?当然,我们需要用到Object.defineProperty方法:

Object.defineProperty(input, 'val', { //这里必须定义一个新的属性名称,不可以用value,否则会报错。
get: function () {
return this.value;
},
set: function (val) {
this.value = val;
title.innerHTML = val;
}
});

这样我们就为input增加了一个val属性,val的值与input.value是关联的,并且我们在val的setter中增加了更新h1文字的代码,现在我们就可以直接通过

input.val = 'good';

的方式来同时更新input.value和h1的文字了

用Object.defineProperty这个方法来实现数据的双向绑定是Vue的核心思想,该方法的更多细节请看

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

[JS] 数据双向绑定原理的更多相关文章

  1. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  2. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

  3. 真正的原生JS数据双向绑定(实时同步)

    真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...

  4. 对象的属性类型 和 VUE的数据双向绑定原理

    如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty()  //IE9+  和标准浏览器  支持 查看属性的 ...

  5. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  6. Vue数据双向绑定原理(vue2向vue3的过渡)

    众所周知,Vue的两大重要概念: 数据驱动 组件系统 1 2 接下来我们浅析数据双向绑定的原理 一.vue2 1.认识defineProperty vue2中的双向绑定是基于definePropert ...

  7. vuejs数据双向绑定原理(get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  8. 关于简单的数据双向绑定原理,defineProperty 和Proxy演示

    双向绑定,也就是说js中的数据传到页面,页面中的内容到js,实现同步更新,简单的演示可以直接复制下放HTML代码运行. 在这个例子中,我们使用defineProperty ,Object.define ...

  9. 前端数据双向绑定原理:Object.defineProperty()

    Object.definedProperty方法可以在一个对象上直接定义一个新的属性.或修改一个对象已经存在的属性,最终返回这个对象. Object.defineProperty(obj, prop, ...

随机推荐

  1. 45. Jump Game II (Array; Two-Pointers,Greedy)

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  2. New Game! (最短路+建图)

    New Game! https://www.nowcoder.com/acm/contest/201/L 题目描述 Eagle Jump公司正在开发一款新的游戏.Hifumi Takimoto作为其中 ...

  3. 127单词接龙 1· Word Ladder1

    找出最短路径 [抄题]: Given two words (beginWord and endWord), and a dictionary's word list, find the length ...

  4. 全排列12 · Permutations

    无重复 [抄题]: Given a collection of numbers, return all possible permutations. For example,[1,2,3] have ...

  5. Codeforces 681C. Heap Operations 优先队列

    C. Heap Operations time limit per test:1 second memory limit per test:256 megabytes input:standard i ...

  6. laravel表单提交

    1.控制器->路由->视图 2.视图 3.控制器

  7. 深入浅出 JMS(二) - ActiveMQ 入门指南

    深入浅出 JMS(二) - ActiveMQ 入门指南 上篇博文深入浅出 JMS(一) – JMS 基本概念,我们介绍了消息通信的规范JMS,这篇博文介绍一款开源的 JMS 具体实现-- Active ...

  8. vue父子间通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  9. 关于多系统跨浏览器 BrowserStack 的使用

    偶然在Scott Hanselman Blogs看到一篇关于 BrowserStack 博文,对于前端多浏览器测试. 现在拥有各自内核的浏览器越来越多,各自的特性也千差万别.如果作为一个前端攻城师想要 ...

  10. C语言基础课第四次作业

    1.实验代码      7-2 打印九九口诀表 (15 分) #include<stdio.h> #include<math.h> int main(void){ int a, ...