Vue的数据双向绑定功能一直为人称道, Vue数据的双向数据绑定主要依赖了
Object.defineProperty,这里尝试用最简单的代码, 实现数据的双向绑定Demo
MVVM
ViewModel基本实现原理
Gif动态效果:
数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据双向绑定的实现</title>
<style>
section{
text-align: center;
}
input{
width: 800px;
height: 100px;
font-size: 90px;
color: #d46f17;
}
div, label{
width: 500px;
height: 110px;
font-size: 90px;
color: #c03035;
text-align: center;
}
body{
align-content: center;
}
</style>
<script>
window.onload = function(){
// 创建数据对象
window.data = {};
// 创建数据键值对
let _name = "";
let my_input = document.getElementById('myInput');
let desc = document.getElementById("desc");
Object.defineProperty(window.data, "name", {
// 返回数据
get: function(){
return _name;
},
// 设置数据
set: function(value){
_name = value;
// 将新数据添加到input和div元素内
my_input.value = value;
desc.innerHTML = value;
}
});
// 获取input按钮, 并为其绑定事件
my_input.addEventListener('input', function (ev) {
new_data = ev.target.value;
console.log("当前输入框内的数据为:",new_data);
// 将框内的数据赋值给, data
window.data.name = new_data
})
}
</script>
</head>
<body>
<section>
<label for="myInput">双向绑定Demo</label><input type="data" id="myInput">
<div id="desc"></div>
</section>
</body>
</html>
