vue手动实现双向绑定

前端这点事 365 0

直接上代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue bind</title>
</head>
<body>
     <input type="text" id="text">
     <span id="span"></span>
    <script>
        function getEle (idName){
            return document.querySelector(idName)
        }
        let obj = {
            text: ''
        }
        var text = getEle('#text');
        var span = getEle('#span');
        Object.defineProperty(obj, 'text', {
            set (value){
                console.log(span)
                span.innerText = value
                text.value = value
            },
            get (){
                console.log('get value')
            }
        })
        console.log(text)
        text.addEventListener('keyup', function (e){
            obj.text = e.target.value;
        })
        
    </script>
</body>
</html>



标签: Vue