首页 > 其他 > 详细

Vue v-modle 简陋双向绑定原理

时间:2021-05-26 15:00:06      阅读:22      评论:0      收藏:0      [点我收藏+]

https://www.jianshu.com/p/cf91da3c4a77

let me = {
      _name: "初始值" // 假设为一个私有变量
    }
    // 为me对象添加一个name属性
    Object.defineProperty(me,"name",{
      // 取对象me的name值
      get: function(){
        return me._name;
      },
      // 改变me对象的name值
      set: function(newValue) {
        me._name = newValue;
        document.getElementById("txt").value = newValue;
      }
    })
    document.getElementById("txt").value = me.name;
    function input(ev) {
      console.log("输入值--",ev.target.value);
      document.getElementsByClassName("inp1")[0].value = ev.target.value;
    }
    function editName() {
      console.log("触发编辑事件--");
      // 在input框输入:修改文本框的值
      me.name = ‘zhangsan‘; // 修改name属性的值
    }
    // 监听文本框值,把文本框值赋值给me对象私有变量
    document.getElementById("txt").oninput = function(e) {
      me._name = e.target.value;
    }

技术分享图片

 

 技术分享图片

 

v-model没有到下一层:绑定的是引用类型,没有声明就不会响应式

对象地址未发生改变 因而值不发生变化

引用地址未发生改变

 

Vue v-modle 简陋双向绑定原理

原文:https://www.cnblogs.com/hqq422/p/14813120.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!