雙向資料綁定是什麼？簡單雙向資料綁定的實作（程式碼範例）-js教程-PHP中文網

雙向資料綁定是什麼？簡單雙向資料綁定的實作（程式碼範例）

青灯夜游

發布： 2018-10-26 11:55:09

原創

3875 人瀏覽過

雙向資料綁定是什麼？這篇文章帶給大家的內容是介紹雙向資料綁定的相關內容，讓大家了解為什麼要實現雙向資料綁定，以及怎麼實現簡單的雙向資料綁定。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

首先我們了解單向資料綁定和雙向資料綁定是什麼？

單向資料綁定是什麼？

資料模型（Module）和視圖（View）之間的單向綁定。

需要我們先寫好模板，然後把模板和資料（可能來自後台）整合到一起形成HTML程式碼，然後把這段HTML程式碼插入文件流裡面。簡單的來說就是DOM操作html元素。

單向資料綁定的缺點：一旦HTML程式碼產生好後，就沒有辦法再進行改變了，如果有新的資料出現，那就必須先把之前的HTML程式碼刪掉，然後重新把新的資料和範本一起整合成新的HTML程式碼，再插入文件流程。

雙向資料綁定是什麼？

資料模型和視圖之間的雙向綁定。

當資料發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，資料也會跟著同步變化；可以這樣說使用者在視圖上的修改會自動同步到資料模型中去，資料模型也是同樣的變化。

雙向資料綁定的優點：無需和單向資料綁定那樣進行CRUD（Create，Retrieve，Update，Delete）操作，雙向資料綁定最常應用在就表單上，這樣當使用者在前端頁面完成輸入後，不用任何操作，我們就已經拿到了使用者輸入好的數據，並放到數據模型了。

原生js實作簡單的雙向資料綁定

程式碼範例：標籤內顯示的內容隨使用者輸入的內容而改變

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>原生js实现简单的双向数据绑定</title>
</head>
<body>
<input type="text" id="userName">
<span id ="uName"></span>
<script>
    var obj={
        pwd:"1234"
    };
    //主要使用到了get和set方法，最为关键
    Object.defineProperty(obj,"userName",{
        get:function(){
            console.log(&#39;get init&#39;);
        },
        set:function(val){
            console.log("set init");
            document.getElementById("uName").innerText=val;
            document.getElementById("userNmae").value=val;
        }
    });
    document.getElementById("userName").addEventListener("keyup",function(event){
        obj.userName=event.target.value;
    }
    )
</script>
</body>
</html>

登入後複製

效果圖：

雙向資料綁定是什麼？簡單雙向資料綁定的實作（程式碼範例）