原生js實現數據單向綁定

来源:http://www.cnblogs.com/gxp69/archive/2017/06/24/7073415.html
-Advertisement-
Play Games

<img src="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=javascript%E6%91%98%E8%A6%81%E5%9B%BE%E6%A0%87&step_word=&hs=2&pn=36&spn=0... ...


Object.defineProperty()方法直接在對象上定義一個新屬性,或修改對象上的現有屬性,並返回該對象。

Object.defineProperty(obj, prop, descriptor)

參數

  obj 定義屬性的對象。
  prop 要定義或修改的屬性的名稱。

  descriptor 定義或修改屬性的描述符。

  返回值 傳遞給函數的對象。
註意:數據描述符和訪問器描述符,不能同時存在(value,writable 和 get,set)

  get:函數return將被用作屬性的值。

  set:該函數將僅接收參數賦值給該屬性的新值。(在屬性改變時調用)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="aa"/>*<input type="text" id="cc"/>
<span id="bb">{{hello}}</span>

<script>
var obj = {};
Object.defineProperty(obj,'hello',{
enumerable: true,
configurable: true,
get: function() { return document.getElementById('aa').value; },
set:function(val){
document.getElementById('bb').innerHTML = val*obj.hello2;
}
});
Object.defineProperty(obj,'hello2',{
enumerable: true,
configurable: true,
get: function() { return document.getElementById('cc').value; },
set:function(val){
document.getElementById('bb').innerHTML = val*obj.hello;
}
});
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>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 閉包的概念 維基百科中是這麼解釋閉包的: 電腦科學中,閉包(也稱為詞法閉包或函數閉包)是指一個函數或函數的引用,與一個引用環境綁定在一起。這個函數環境是一個存儲該函數每個非局部變數(也叫自由變數)的表。 閉包,不同意一般函數,它允許一個函數在立即詞法作用域外調用時,認可訪問非本地變數。 閉包的例子 ...
  • 函數的調用 直接調用 foo(); 對象方法 o.method(); 構造器 new Function(); call/apply/bind func.call(o); 函數聲明和表達式 函數聲明會被前置,函數表達式變數聲明會被前置,但是值為 。 函數聲明 函數表達式 將函數賦值給一個變數 匿名函數 ...
  • JS單詞 push :添加一個數組元素 document :文檔 pop :刪除最後一個數組元素 console :控制台 shift :刪除第一個數組元素 string :字元串 Concat 組合數組 undefined :未定義 typeof :關鍵字 join:數組轉化為指定分隔符 slic ...
  • -任何標簽的任何屬性都可以修改! -HTML里是怎麼寫, JS就怎麼寫 以下是一段js 作用於 css 的 href的 代碼 以下是一段JS作用於標簽的事件屬性的代碼 ...
  • 糾結了一會要不要寫這麼簡單的隨筆,善始善終吧。開始之前得先確保你已經安裝好node了。可以參考之前一篇教程:Node.js安裝教程--windows中通過安裝nvmw方式安裝管理node 。同時要先去碼雲上註冊個帳號吧。 1.打開idea,新建項目: 2.選擇Node.js and NPM 3.此處 ...
  • 領導找談話,公司不好混了,說要想清楚以後發展方向啥的。就想想研究下node.js吧。 首先在知乎上看看介紹,大體瞭解了node.js ,百度搜索確實很多亂七八糟的,感覺還是知乎靠譜點。附上知乎的node.js的話題地址:https://www.zhihu.com/topic/19569535 然後隨 ...
  • 繼承方式有四種: 1、call 2、apply 3、prototype 4、for in call 和 apply 的主要區別: call 傳參數只能一個一個的傳, apply 因為是用數組,所以可以用arguments 獲取所有的實參。當參數多時,就用apply更方便。 arguments = 返 ...
  • CSS實現兩端對齊效果 兩端對齊,從概念上來說,其實不難理解。如果不明白什麼叫兩端對齊,可以玩玩word等辦公軟體。 下麵談談如何實現文本的兩端對齊。我所知道的大概有以下幾種方法 text align "w3school" 指出,text align用於設置塊級元素內文本的水平對齊方式。如果想使in ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...