博主信息
Peter_Zhu教学笔记
博文
24
粉丝
1195
评论
19
访问量
8003
积分:139
P豆:838

20行实现Vue双向数据绑定

2019年08月29日 12:01:46阅读数:298博客 / Peter_Zhu教学笔记 / JavaScript

Vue.js中最让引人入胜的功能之一就是: 数据的双向绑定

下面使用原生JavaScript, 只须区区20行代码即可实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据双向绑定</title>
</head>
<body>
<label>输入:<input id="input" type="text"></label>
<p id="p"></p>

<script>
    let obj = {};
    let input = document.getElementById('input');
    let p = document.getElementById('p');
    Object.defineProperty(obj, 'text', {
        configurable: true,
        enumerable: true,
        get() {
            console.log('获取到数据了');
            return obj.text;
        },
        set(newVal) {
            console.log('数据更新了');
            input.value = newVal;
            p.innerHTML = newVal;
        }
    });
    input.addEventListener('keyup', function (ev) {
        obj.text = ev.target.value;
    }, false);
</script>
</body>
</html>

感兴趣的小伙伴上, 赶紧上机试试吧

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
暂无评论暂无评论!