初探數據雙向綁定

陸斌發布于2019-08-26 11:55 / 430人閱讀

摘要：數據描述符與存取描述符不可混用否則報錯。的參數數據描述符屬性的值，默認為。運行結果注意當使用了或方法，不允許使用和這兩個屬性。標簽設置鍵盤彈起事件賦值，實現數據雙向開始。

認識Object.defineProperty以及Object.defineProperties

Object.defineProperty會直接在對象上定義新的屬性和方法，或者修改存在的屬性和方法，并返回這個對象。

語法：

Object.defineProperty(object, propertyname, descriptor)

參數：

object 必需。添加需要修改屬性或者添加屬性的對象。

propertyname 必需。需要定義或者修改屬性的名稱(字符串)。

descriptor 必需。屬性描述符。通俗說，屬性的描述。可以添加數據(數據描述符)屬性，或者訪問器(存取描述符)屬性。數據描述符與存取描述符不可混用,否則報錯。后續詳解。

descriptor的參數

數據描述符

value-----屬性的值，默認為 undefined。

writable-----屬性是否可寫，當屬性的值可以被賦值操作修改時設置為true。默認為false。

訪問器描述符

get-----屬性的getter方法，屬性如果有getter方法，則返回屬性值，否則返回undefined。默認為 undefined。

set-----屬性的setter方法，屬性如果沒有setter方法，返回undefined。該方法接收唯一的參數，作為屬性的新值。默認為 undefined。

實例

實現input輸入，span同時輸出功能

運行結果

注意

當使用了getter或setter方法，不允許使用writable和value這兩個屬性。

get或set不是必須成對出現，任寫其一就可以。如果不設置方法，則get和set的默認值為undefined

Object.defineProperties使用

語法

Object.defineProperties(obj, props)

使用實例

兩個input標簽之間數據互傳

運行結果

云服務器 GPU云服務器雙向數據綁定 js雙向數據綁定 js雙向綁定數據 asp雙向數據綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107814.html

React 初探

摘要：各個組件維護自己的狀態和，當狀態變更，自動重新渲染整個組件。形式的定義的組件是以的形式來創建的組件的，是目前極為推薦的創建有狀態組件的方式，最終會取代形式相對于可以更好實現代碼復用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號。目前在前端開發領域，框架Angular、react和vue占據著主流的地位而且可能會持續比較長的一段時間。三門框架中，從數據綁定機制來看，vue和an...

levy9527 2019-08-21 12:05 評論0 收藏0
React 初探

摘要：各個組件維護自己的狀態和，當狀態變更，自動重新渲染整個組件。形式的定義的組件是以的形式來創建的組件的，是目前極為推薦的創建有狀態組件的方式，最終會取代形式相對于可以更好實現代碼復用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號。目前在前端開發領域，框架Angular、react和vue占據著主流的地位而且可能會持續比較長的一段時間。三門框架中，從數據綁定機制來看，vue和an...

trilever 2019-08-01 17:32 評論0 收藏0
vue初探--編寫表格組件

摘要：容器里面包含部分，其一為提供過濾器的入口其二為表格組件。數據綁定，簡寫形式為在父組件和子組件的通訊中，必須要在子組件里面聲明。如果是編寫則必須是注冊組件的語法糖。下次還是上動圖吧以后基本上碰到這種使用表格呈現數據的組件。在項目當中，經常會有表格組件，包含2部分，其一為table-header,其二為table-content 然后在這個小demo里面涉及到了vue的個別指令: v-f...

dabai 2019-08-19 17:12 評論0 收藏0
vue初探-簡易留言板

摘要：學完的基礎語法之后，練手一下，從最基本的留言板開刀吧。功能不多，主要為了熟悉的基礎語法使用。學完vue的基礎語法之后，練手一下，從最基本的留言板開刀吧。功能不多，主要為了熟悉vue的基礎語法使用。詳細vue教程請移步vue.js 2.0 技術框架 1.vue.js 2.0 2.bootstrap 語法概述這里只寫一點此例子用到的一些語法知識，詳細API請移步：vue 2.0 a...

GHOST_349178 2019-08-20 12:04 評論0 收藏0