zoukankan      html  css  js  c++  java
  • vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单

    在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理,

    方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有三个参数,

    Object.defineproperty(obj,'val',attrObject), 参数1: obj是属性所在的对象,参数2: 'val',属性名,它是一个string类型,参数3: {}属性所描述的对象

    详情可以看Object.defineproperty的文档

    下面直接上demo,

    html代码: 

    <input type="text" id="inp1">  <br>
        你说啥: <span id="inp2"></span>

    js代码 

    var inp1 = document.getElementById('inp1')
        var inp2 = document.getElementById('inp2')
        var obj ={}
        Object.defineProperty(obj,'val',{  // 传入obj对象的一个属性  属性名是自定义的
            set: function(newval){  // 通过set方法可以拿到新的值  
                // console.log(newval)
                inp1.value= newval
                inp2.innerHTML= newval
            }
        })
        // 给输入框一个监听事件  监听变化时重新赋值
        inp1.addEventListener('keyup',function(e){
            // console.log(e.target.value)
            obj.val = e.target.value
        })

    效果图如下: 

  • 相关阅读:
    pymysql模块的简单操作
    day21--继承--派生
    subprocess模式,re模式,logging模块, 防止测试自动执行, 包的理论
    前端知识
    Django框架
    jieba/word cloud
    python语法基础知识
    Vue框架——Vue指令
    Vue框架基础
    Django——静态文件配置和连接数据库
  • 原文地址:https://www.cnblogs.com/PinkYun/p/10086996.html
Copyright © 2011-2022 走看看