Vue.js-手寫實現一個簡單的雙向數據綁定

時間 2020-12-06

標籤 vue spa code get input function class model 欄目 JavaScript 简体版

原文原文鏈接

雙向數據綁定幾乎是咱們在vue中聽到的最多的東西。v-model是咱們最多見的雙向數據綁定指令。那麼它到底是怎麼實現的，一塊兒手寫一下。vue

<body>
    <input type='text'>
    <span class='ppp'></span>
</body>

<script>
    let obj = {};
    let temp;
    
    let ipt = document.querySelector('input');
    ipt.oninput = function(){
        obj.a = ipt.value;
    }
    
    //獲取焦點 而且用戶修改了值
    Object.defineProperty(obj,'a',{
        get:function(){
            return temp;
        },
        set:function(val){
            temp = val;
            ipt.value = val;
            document.querySelector('ppp').innerHTML = val;
        }
    })
    
    //當咱們obj中的a屬性發生變化後，input的值跟着改變
    //input的值發生變化後，obj的a屬性也跟着改變
</script>

相關標籤/搜索