原生js实现VUE双向绑定

技术 · 2023-07-11
原生js实现VUE双向绑定

该实例模拟实现Vue中 v-model 实现双向绑定的原理

html部分,一个 input 标签输入,h2 标签用来显示输入的数据

    <input type="text">
    <h2></h2>

js部分:

        let input=document.querySelector('input')
        let h2=document.querySelector('h2')
        let obj={
            msg:'haha'
        }
        input.value=obj.msg
        h2.innerText = obj.msg
        input.addEventListener('input',function(e){
            obj.msg = e.target.value
        })
        //Object.defineproperty 的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性
        Object.defineProperty(obj, 'msg', {
            set:function(val){
                h2.innerText = val
            }
        })
javascript vue
Theme Jasmine by Kent Liao