欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

一个非常简陋的Vue双向绑定实现

程序员文章站 2024-03-01 17:18:34
...
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向绑定</title>
    <Style>
        body,
        html {
            margin: 0;
            width: 100%;
            height: 100%;
        }

        .main {
            width: 100px;
            height: 50px;
            position: absolute;
            top: calc(50% - 25px);
            left: calc(50% - 50px);
        }
    </Style>
</head>

<body>
    <div class="main">
        <span id="spa">123</span>
        <input id="ipt" type="text" value="" oninput="change(value)">
        <button onclick="ckl()">click</button>
    </div>
</body>
<script>
    let Book = { id: '1', male: '逍遥哥哥', female: '灵儿妹妹',list:[
        {
            index:1
        },
        {
            index:2
        },
        {
            index:3
        }
    ] };
    function defineProperty(data, key, val) {
        observer(val);
        Object.defineProperty(data, key, {
            set: (newVal) => {
                console.log('属性' + key + '已经被监听了,现在值为:' + newVal.toString() + '');
                document.getElementById("spa").innerHTML = newVal;
                document.getElementById("ipt").value = newVal;
            },
            get: () => {
                return val
            }
        })
    }

    function observer(params) {
        if (!params || typeof params !== 'object') {
            return;
        }
        Object.keys(params).forEach(function (key) {
            defineProperty(params, key, params[key])
        });
    }
    observer(Book);

    function change(params) {
        console.log("params",params)
        Book.male = params
    }

    function ckl(params) {
        Book.male = 'Hello Vue'
    }
</script>

</html>
相关标签: Vue vue js