手写vue的双向绑定

        姓名: <span id="spanName"></span>
        <br>
        <input type="text" id="iptName" />

关键的js代码:

        let obj = {
            name: ''
        }
        let spanName = document.getElementById('spanName')
        let iptName = document.getElementById('iptName')
        let newObj = JSON.parse(JSON.stringify(obj))
        Object.defineProperty(obj, 'name', {
            get() {
                return newObj.name
            },
            set(val) {
                if (val === newObj.name) return
                newObj.name = val
                observer()
            }
        })
        function observer() {
            spanName.innerHTML = obj.name
            iptName.value = obj.name
        }
        observer()
        setTimeout(() => {
            obj.name = "456"
        }, 1000)
        iptName.oninput = function () {
            obj.name = this.value
        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值