vue原理 - 函数

作者: xueyueshuai | 来源:发表于2020-02-14 11:54 被阅读0次

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue原理 - 函数</title>
</head>

<body>


    <input v-model="text" id="test"></input>
    <div id="test1"></div>

    <script>
        var obj = {};
        Object.defineProperty(obj, 'hello', {
            get: function(v) {
                //我们在这里拦截到了数据
                console.log(v);
                console.log("get方法被调用");
            },
            set: function(newValue) {
                //改变数据的值，拦截下来额
                console.log("set方法被调用");
                document.getElementById('test').value = newValue;
                document.getElementById('test1').innerHTML = newValue;
            }
        });
        // obj.hello = '123';
        // obj.hello;
        document.getElementById('test').addEventListener('input', function(e) {
            console.log(e.value)
            obj.hello = e.target.value; //触发它的set方法
        })
    </script>

</body>

</html>