2020-02-14 如何原生js实现 `v-model` 指令 的双向数据绑定原理 实现方法：数据劫持 + 发布订阅者 的模式

如何原生js实现 v-model 指令 的双向数据绑定原理
实现方法：数据劫持 + 发布订阅者 的模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<input type="text"/>
<p>
    更新数据
</p>

<!-- 通过js实现数据的双向绑定 -->
<script>
    var ipt =document.querySelector('input');
    var p = document.querySelector('p');

    var data = {name:""};
    ipt.oninput = function(){
        data.name = ipt.value;
    }
    Object.defineProperty(data,"name",{
    // 数据订阅
    get(){
        return ipt.value;
    },
    // 数据劫持
    set(value) {
        p.innerHTML = value;
        ipt.value = value;
    }   
})
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容