zoukankan      html  css  js  c++  java
  • 应用defineProperty简单实现vue的双向数据绑定

    双向数据绑定简易版本如何应用defineProperty的getter setter 方法

    有这样HTML片段

    <input type="text" id="demo">
    <p id="display"></p>
    var obj = {};
                var bind = [];
                Object.defineProperty(obj, 's', {
                    set:function(val){
                        bind['s'] = val;
                    },
                    get:function(){
                        return bind['s'];
                    }
                });
    
                var demo = $('#demo');
                var display = $('#display');
                demo.keyup(function(event) {
                    /* Act on the event */
                    obj['s'] = demo.val();
                    display.html(bind['s']);
                });

    对对象obj['s'] = demo.val();   触发defineProperty的set方法  对bind['s'] 赋值为demo的值。

  • 相关阅读:
    厂商前缀
    文本阴影和边框阴影
    2D转换
    overflow属性
    margin属性
    CSS圆角边框
    浮动定位
    文档流定位
    position属性
    选择器二
  • 原文地址:https://www.cnblogs.com/junwu/p/7274034.html
Copyright © 2011-2022 走看看