利用Object.defineProperty實現Vue數據雙向綁定

body部分很簡單,一個輸入框和一個展現的divspa

<div>
    <p>你好,<input id='nickName'></p>
    <div id="introduce"></div>
</div>

邏輯部分code

    <script>
        var userInfo = {};
        var a = '';
        var inp = document.getElementById('nickName');
        var odiv = document.getElementById('introduce');
        Object.defineProperty(userInfo, "nickName", {
            get: function(){
                return inp.value;
            },
            set: function(nick){

            }
        });
        Object.defineProperty(userInfo, "introduce", {
            get: function(){

            },
            set: function(introduce){
                odiv.innerHTML = introduce;
            }
        })

        inp.addEventListener("keyup",function(){
            userInfo.introduce = userInfo.nickName;
        })

    </script>

效果是blog

相關文章
相關標籤/搜索