双向数据绑定原理

原创于 2019-05-31 21:15:54 发布 · 368 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#双向数据绑定 #VUE原理 #双向数据绑定原理

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

原理

2 篇文章

订阅专栏

博客介绍了双向数据绑定的实现方式，即利用对象对应的址来实现。因为对象赋值是赋址而非值，所以无需用字符串记录值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用对象对应的址实现双向数据绑定，对象赋值是赋址而不是值，这也就是不用字符串记录这个值的原因

{ 对象址 }

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<input type="text" id = "userName" >

<input type="text" id = "userNameTo">

<script>

var demo = {'name':'json'}; //必须是对象

var inputObj = document.getElementById('userName');

var showObj = document.getElementById('userNameTo');

inputObj.addEventListener('input',modelToView); // 绑定事件 当输入值的时候对对象的值进行改变

var model = new Object(null);

Object.defineProperty(model,'name',{ // 对象的值进行改变的时候就会触发

  set:function(value){

  console.log("执行");

  name = value;

  showObj.value = value; // 值改变的时候进行doc操作

},

get:function(){

  return name;

  }

});



function modelToView(){

  console.log("执行函数");

  model['name'] = inputObj.value;

  console.log(model);

}

</script>



</body>

</html>