JS数据双向绑定原理与用法实例分析

本文实例讲述了JS数据双向绑定原理与用法。分享给大家供大家参考，具体如下：

通常在前端开发过程中，经常遇到需要绑定两个甚至多个元素之间的值，比如将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

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript实现数据双向绑定的三种方式小结

    前端数据的双向绑定方法 前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下.目前实现数据双向绑定主要有以下三种. 1.手动绑定 比较老的实现方式,有点像观察者编程模式,主要思路是通过在数据对象上定义get和set方法(当然还有其它方法),调用时手动调用get或set数据,改变数据后出发UI层的渲染操作:以视图驱动数据变化的场景主要应用与input.select.textarea等

  • Vue.js每天必学之数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新. 你也可以只处理

  • Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

    表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业务较为常见,比如单选.多选.下拉选择.输入框等,用它们可以完成数据的录入.校验.提交等. Vue.js提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上. 例如下面的例子: <div id="app"> <input type="text" v-mo

  • AngularJS学习笔记（三）数据双向绑定的简单实例

    AngularJS学习笔记（三）数据双向绑定的简单实例

    双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 数据-->视图 这里我们只演示有了数据以后,如何绑定到视图上. <!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandb

  • JS原生数据双向绑定实现代码

    JS原生数据双向绑定实现代码

    代码如下: <span style="font-family:Times New Roman;font-size:14px;" deep="7"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <script> fu

  • 轻松实现javascript数据双向绑定

    双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的UI,反之亦然.换句话说,如果我们有一个user对象,这个对象有一个name属性,无论何时你对user.name设置了一个新值,UI也会展示这个新的值.同样的,如果UI包含一个用于数据用户名字的输入框,输入一个新值也会导致user对象的name属性发生相应的改变. 许多流行的javascript框架,像Ember.js,Angular.js或者KnockoutJS都会把双向数据绑定作为其中的主要特性来宣传.这并不意味着从头开始实现它很难,

  • 深入理解Angularjs向指令传递数据双向绑定机制

    下面来先看一个简单例子 <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../bootstrap.min.js"> </

  • vue.js使用v-model指令实现的数据双向绑定功能示例

    vue.js使用v-model指令实现的数据双向绑定功能示例

    本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能.分享给大家供大家参考,具体如下: vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过

  • Nuxt.js 数据双向绑定的实现

    假定我们有一个需求,一开始通过mounted()将一个字符串渲染在页面上,但是我们经过操作后修改了数据并且需要将得到的结果重新异步渲染到页面中去,而不是跳转刷新页面来重新渲染 首先模板中data()中定义数据,并且要将定义的数据显示出来 <template> <div> <span @click="click">{{ text }}</span> </div> </template> <script>

  • JS数据双向绑定原理与用法实例分析

    JS数据双向绑定原理与用法实例分析

    本文实例讲述了JS数据双向绑定原理与用法.分享给大家供大家参考,具体如下: 通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title">Hello</h1> <input type="text" id="a" /> 首先是在界面上更改input的值,需要监听input的"input&qu

  • JS高阶函数原理与用法实例分析

    本文实例讲述了JS高阶函数原理与用法.分享给大家供大家参考,具体如下: 如果您正在学习JavaScript,那么您必须遇到高阶函数这个术语.这听起来复杂,其实不然. 使JavaScript适合函数式编程的原因是它接受高阶函数. 高阶函数在JavaScript中广泛使用.如果你已经用JavaScript编程了一段时间,你可能已经使用它们甚至不知道. 要完全理解这个概念,首先必须了解函数式编程是什么一等函数(first-Class Function)以及的概念. 函数式编程 在大多数简单的术语中,函

  • Vue数据双向绑定原理实例解析

    Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的,首先是对数据进行监听,然后当监听的属性发生变化时则告诉订阅者是否要更新,若更新就会执行对应的更新函数从而更新视图 MVC模式 以往的MVC模式是单向绑定,即Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新 MVVM模式 MVVM模式就是Model–View–ViewModel模式.它实现了View的变动,自动反映在 ViewModel,反之亦然.对于双向绑定的理解,就是用户更

  • Vue 的双向绑定原理与用法揭秘

    本文实例讲述了Vue 的双向绑定原理与用法.分享给大家供大家参考,具体如下: Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 <div id="app"> <h2>What's your name:</h2> <input v-model="name" /> <div>Hello

  • Vue数据双向绑定原理及简单实现方法

    Vue数据双向绑定原理及简单实现方法

    Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一.示例 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 二.实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的. 1)数据劫持.vue是通过Object.defineProperty()来实现数据劫持

  • proxy实现vue3数据双向绑定原理

    目录 一.proxy对比Object.defineProperty的优点 二..proxy监听对象的简单实现 1.代理对象简单实现 2.补充知识 Reflect 3.proxy方法 三.手写vue3.0双向绑定-es6 Proxy 1.什么是Proxy 2.vue.js中使用双向绑定 四.Proxy对比Object.defineProperty 一.proxy对比Object.defineProperty的优点 proxy的优点: Proxy 可以直接监听对象而非属性: Proxy 可以直接监听

  • vue数据双向绑定原理解析（get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通过事件回调函数操作的,model到view的绑定有多种方法. angular,react,vue等mv*模式的框架都实现了数据双向绑定:angular是通过脏检查即新老数据的比较来确定哪些数据发生了变化,从而将它更新到view中:vue则是通过设置数据的get和set函数来实现的,这种方式在性能上是

  • 浅谈vue,angular,react数据双向绑定原理分析

    浅谈vue,angular,react数据双向绑定原理分析

    传统做法 前端维护状态,手动操作DOM更新视图.前端框架对服务器数据通过模版进行渲染.当用户产生了一个动作之后,我们通过document.getElementBy... 手动进行DOM更新. 框架帮忙分离数据和视图,后续状态更新需要手动操作DOM,因为框架只管首次渲染,不追踪状态监听变化. 双向数据绑定 当我们在前端开发中采用MV*的模式时,M - model,指的是模型,也就是数据,V - view,指的是视图,也就是页面展现的部分.通常,我们需要编写代码,将从服务器获取的数据进行"渲染&qu

  • PHP设计模式之数据访问对象模式（DAO）原理与用法实例分析

    本文实例讲述了PHP设计模式之数据访问对象模式(DAO)原理与用法.分享给大家供大家参考,具体如下: 这个数据访问对象模式主要就是描述了如何创建透明访问数据源的对象,这种设计模式对于同时学过PHP和MySQL的人来说,是一个全新的和令人兴奋的概念,并且这种设计模式的目的就是为了解决重复与数据源抽象化这两种特定的问题. 我们可以先创建一个数据访问对象设计模式的对象,这个数据访问对象封装了创建sQL调用.减少实例创建的复杂性和重复以及更新进程的智能方式,并且,这个数据访问对象的使用者不会知道实际使用

随机推荐