视频地址

https://pan.baidu.com/s/1sndXz3Z?fid=1068572190871955 

笔记

<input type="text" id="input">
<script>
    let obj = {};
    let temp = {};
    Object.defineProperty(obj,'name',{
        get(){ // 取obj的name属性会触发
            return temp["name"];
        },
        set(val){ // 给obj赋值会触发get方法
            temp["name"] = val; // 改变temp的结果
            input.value = val; // 将值赋予输入框
        }
    });
    input.value = obj.name; // 页面一加载时 会调用get方法
    input.addEventListener('input',function () { // 等待输入框的变化
        obj.name = this.value; // 当值变化时会调用set方法
    });

    /*Object.defineProperty(obj,'name',{
        configurable:false,// 是否可删除
        writable:false, // 是否可重新赋值
        enumerable:false, // 是否可枚举
        value:1
    })*/

</script>

<input type="text" id="input">
<script>
    let obj = {};
    let temp = {};
    Object.defineProperty(obj,'name',{
        get(){ // 取obj的name属性会触发
            return temp["name"];
        },
        set(val){ // 给obj赋值会触发get方法
            temp["name"] = val; // 改变temp的结果
            input.value = val; // 将值赋予输入框
        }
    });
    input.value = obj.name; // 页面一加载时 会调用get方法
    input.addEventListener('input',function () { // 等待输入框的变化
        obj.name = this.value; // 当值变化时会调用set方法
    });

    /*Object.defineProperty(obj,'name',{
        configurable:false,// 是否可删除
        writable:false, // 是否可重新赋值
        enumerable:false, // 是否可枚举
        value:1
    })*/

</script>

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » 基础指令