0
点赞
收藏
分享

微信扫一扫

简单实现vue的双向数据绑定

老罗话编程 2022-04-16 阅读 57
vue.js
<input type="text" id="input">
let number = 20;
let obj = {
    name:'张三',
    sex:'男',
}
Object.defineProperty(obj,'age',{
    
    // 枚举:(使用forin遍历对象属性是否显示出来)
    enumerable:true,  //控制属性是否可以枚举,默认false
    //writable:true,    //控制属性是否可以被修改,默认false
    configurable:true, //控制属性是否可以被删除,默认false
    // 当有人读取obj的age属性,get函数(getter)就会调用,且返回值就是age的值
    get:function() {
        console.log('有人读取了age属性了');
        return number;
    },
    // 简写set为例
    // 当有人修改obj的age属性,set函数(setter)就会调用,且返回值就是修改age的具体值
    set(value) {
        console.log('有人修改age属性,且值是',value);
        // 修改
        number = value;
    }
})
let input = document.querySelector('#input')
input.value = obj.age
input.onchange = function(e){
    let event = e || window.event
    obj.age = event.target.value

}
举报

相关推荐

0 条评论