1. 程式人生 > >javascript簡單實現資料雙向繫結

javascript簡單實現資料雙向繫結

可以直接點選檢視例子

程式碼實現如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js資料雙向繫結</title>
</
head
>
<body> <input id="testInput"> <p id="showTest"></p> <input id="testInput2"> <p id="showTest2"></p> <script> var testInput = document.querySelector('#testInput'), showTest = document.querySelector('#showTest'
), testInput2 = document.querySelector('#testInput2'), showTest2 = document.querySelector('#showTest2'); function watch(obj, key, callback){ var oldValue = obj[key]; Object.defineProperty(obj, key, { get: function(){ return
oldValue; }, set: function(value){ oldValue = value; callback(value); } }); } function init(obj){ testInput.value = obj.text; showTest.innerHTML = obj.text; testInput2.value = obj.message; showTest2.innerHTML = obj.message; } var obj = { text: 123, message: 'qwesd' }; init(obj); watch(obj, "text", function (val) { testInput.value = val; showTest.innerHTML = val; }); watch(obj, "message", function (val) { testInput2.value = val; showTest2.innerHTML = val; }); testInput.oninput = function (e) { obj.text = e.target.value; }; testInput2.oninput = function (e) { obj.message = e.target.value; };
</script> </body> </html>

相關推薦

javascript簡單實現資料雙向

可以直接點選檢視例子。 程式碼實現如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars

javascript實現資料雙向的三種方式

前端資料的雙向繫結方法  前端的檢視層和資料層有時需要實現雙向繫結(two-way-binding),例如mvvm框架,資料驅動檢視,檢視狀態機等,研究了幾個目前主流的資料雙向繫結框架,總結了下。目前實現資料雙向繫結主要有以下三種。1、手動繫結比較老的實現方式,有點像觀察者程

面試總結:vue實現資料雙向的原理

vue實現資料雙向繫結的原理就是用Object.defineproperty()重新定義(set方法)物件設定屬性值和(get方法)獲取屬性值的操縱來實現的 Object.property()方法的解釋:Object.property(引數1,引數2,引數3)   返回值為

如何在原生微信小程式中實現資料雙向歡迎使用CSDN-markdown編輯器

在原生小程式開發中,資料流是單向的,無法雙向繫結,但是要實現雙向繫結的功能還是蠻簡單的! 下文要講的是小程式框架 minapp 中實現雙向繫結的原理,在 minapp 中,你只需要在 wxml 模板中給元件的屬性名後加上 .sync 就可以實現雙向繫

js實現資料雙向

資料的雙向繫結在vue和angular裡面用的比較多,原生js的也可以實現,下面是個小例子,可以做為參考。 <!DOCTYPE html> <html lang="en"> &

Vue之v-model指令實現資料雙向

v-bind指令只能實現資料的單向繫結,從M繫結到V,無法實現雙向繫結。 使用v-model指令,可以實現表單元素和Model中資料的雙向繫結,並且v-model指令只能運用在表單元素中。 <

用原生js實現資料雙向

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <sc

原生js實現資料雙向的三種方式總彙

前端資料的雙向繫結方法  前端的檢視層和資料層有時需要實現雙向繫結(two-way-binding),例如mvvm框架,資料驅動檢視,檢視狀態機等,研究了幾個目前主流的資料雙向繫結框架,總結了下。目前實現資料雙向繫結主要有以下三種。1、手動繫結比較老的實現方式,有點像觀察者程

Vue是怎麼實現資料雙向

vue資料雙向繫結原理 vue資料雙向繫結是通過資料劫持結合釋出者-訂閱者模式的方式來實現的,那麼vue是如果進行資料劫持的,我們可以先來看一下通過控制檯輸出一個定義在vue初始化資料上的物件是個什麼東西 var vm = new Vue({ dat

用jquery實現簡單資料雙向

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script

React學習之旅----實現類似vue的資料雙向

react沒有資料的雙向繫結,但可以用過一些方法實現: import React from 'react'; class TodoList extends React.Component { constructor(props) { super(props) this.sta

自定義父子元件的資料雙向實現

資料結構: 流程分析: 新建時,需要在提交表單時獲取到子元件的child資料,一般情況下,在提交時,利用this.parent.child=this.$refs.child.child,將child的資料賦值到parent中 修改時,需要從父元件把child物件傳遞給子元件,在獲取parent的資

實現VUE2.0中props資料雙向的一種方案

問題描述 在vue2.0中,我們通過props方法來接受父元件所傳過來的值,但是這個過程是單項的,父元件可以改變傳給子元件的值,但是如果子元件想改變所接受的值並傳給父元件是不可以的,會報以下的錯誤。 該錯誤的意思的是:避免直接更改一個PROP,因為每當父元件重新呈現時

vue資料雙向的原理和vue-router路由的實現原理

vue實現雙向資料繫結的原理就是利用了 Object.defineProperty() 這個方法重新定義了物件獲取屬性值(get)和設定屬性值(set)的操作來實現的。 在MDN上對該方法的說明是:Object.defineProperty() 方法會直接在一個物件上定義一

vue中資料雙向實現原理

* Object.defineProperty() * 對物件的屬性進行 定義/修改 * */ let obj = {x:10} // 這兩種方式都相對來說比較簡單,直接,但是有些時候我們需要對物件的屬性的修改和增加進行必要的干預 //

AngularJS的資料雙向是怎麼實現的?

單向繫結(ng-bind) 和 雙向繫結(ng-model) 的區別: ng-bind 單向資料繫結($scope -> view),用於資料顯示,簡寫形式是 {{}} 。<span ng-bind="val"></span> 兩者的區別在於頁面沒有載入完畢 {{val}}

Vue.js資料雙向實現原理

Vue.js 最核心的功能有兩個,一是響應式的資料繫結系統,二是元件系統。本文僅探究雙向繫結是怎樣實現的。一、訪問器屬性訪問器屬性是物件中的一種特殊屬性,它不能直接在物件中設定,而必須通過 defineProperty() 方法單獨定義。       var obj = {

vue原始碼學習——資料雙向的Object.defineProperty

情景:vue雙向繫結,這應該是多數講vue優勢脫口而出的名詞,然後你就會接觸到一個方法 Object.defineProperty(a,"b",{}) 這個方法該怎麼用 簡單例子敲一下 var a = {} Object.defineProperty(a,"b

Vue-事件資料雙向

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>事件處理, 雙向資料繫結</title> <script src="js/v

React 資料雙向 以及鍵盤onChange 事件

React 事件以及form 表單中的應用; 初步探索:         記錄程式碼手法:資料的雙向繫結: import React from 'react' import './../assets/css/common.css' const o_