数据的双向绑定是当视图区的内容变化时,后台与之对应的内容也相应的变化, 反之亦然.。比如现在视图区有一个input输入框,改变输入框的内容时,后台与之对应的内容也会改变;改变后台内容时,输入框的内容也会相应的改变。
实现双向绑定需要使用Object的defineProperty方法和事件,用来监听数据的变化以进行数据的同步改变。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta ppt="viewport" content="width=device-width, initial-scale=1.0">
<title>视图-数据</title>
<style>
#app{
width: 100px;
height: 20px;
}
</style>
</head>
<body>
<div>
后台内容:<span></span>
</div>
<br>
输入框:<input type="text" id="input">
</body>
<script>
var obj={};
var input=document.getElementById("input");
var span=document.getElementsByTagName("span")[0];
Object.defineProperty(obj,"attr",{
configurable:true,
enumerable:true,
set:function(value){//监听后台数据的改变
attr=value;
input.value=value;//将后台数据的值同步到输入框
span.innerHTML=value;//展示后台数据
},
get:function(){
return attr;
}
});
input.onkeyup=function(e){//监听输入框内容的变化
obj.attr=this.value;//将输入框的值同步到后台数据
};
</script>
</html>