模拟实现vue数据双向绑定

原创
2018/09/17 09:25
阅读数 62
<body>
    <input type="text" id="input" value=''>
    <h1 id="text"></h1>
    <button id="btn">点击</button>
</body>
 /* 简单模仿实现vue v-model */
    var obj = {
        "value":9999
    };
    var i = 1;
    const input = document.getElementById('input');
    const text = document.getElementById('text');
    input.value = obj.value;
    text.innerHTML = obj.value;
    input.addEventListener('input',ev => {
        obj.value = input.value;
        i = 1;
    })
    Object.defineProperty(obj,'value',{
        get:() => {
            return
        },
        set:(newVal) => {
            input.value = newVal;
            text.innerHTML = newVal;
        }
    })
    //赋值,验证值是否更改
    const btn = document.getElementById('btn');
    btn.addEventListener('click',() => {
        obj.value = ''
        obj.value = i++;
    })

 

展开阅读全文
打赏
0
0 收藏
分享

作者的其它热门文章

加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部