【JavaScript】js实现双向数据绑定
我们可以定义一个对象，然后为这个对象设置访问器属性（本身还未在对象中定义），当对象属性被修改时触发set函数，通过这个函数可以进行数据的操作，比如数据的判断赋值等一系列操作，从而实现数据的双向绑定。vue是数据驱动框架，当数据发生改变的时候，视图自动更新。4、由于对象属性值被修改从而触发set函数，然后我们在set函数中把用户输入的值赋值给input输入框下面的div，就可以实现双向数据绑定了。我
·
我们需要实现的双向数据绑定是：当在 input 框中输入内容时，input 框下方也能实时显示输入的内容。
我们主要通过ES5中的Object.defineProperty实现，利用它的访问器属性特性中的get和set方法就可以实现双向数据绑定。
我们可以定义一个对象，然后为这个对象设置访问器属性（本身还未在对象中定义），当对象属性被修改时触发set函数，通过这个函数可以进行数据的操作，比如数据的判断赋值等一系列操作，从而实现数据的双向绑定。这个原理是vue的本质原理。vue是数据驱动框架，当数据发生改变的时候，视图自动更新。
主要步骤：
1、定义一个对象
2、利用Object.defineProperty为对象定义一个属性
3、给input输入框绑定监听事件，用于获取用户输入的值并赋值给对象属性
4、由于对象属性值被修改从而触发set函数，然后我们在set函数中把用户输入的值赋值给input输入框下面的div，就可以实现双向数据绑定了
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 输入框 -->
<input type="text" id="inputText">
<!-- 内容展示区 -->
<div id="showContent"></div>
<script>
// 创建一个数据容器对象
var dataObj = {}
// 访问器属性新增一个属性 用户输入的值
Object.defineProperty(dataObj,'inputText',{
get:function(){
return 10
},
set:function(newValue){
// 给div的内容做一个赋值
document.getElementById('showContent').innerHTML = newValue
}
})
// 获取到用户输入的值 DOM 命令式编程
document.getElementById('inputText').addEventListener('input', function (event) {
// 给数据容器中的inputText进行赋值 调用set方法
dataObj.inputText = event.target.value
})
</script>
</body>
</html>
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献4条内容
所有评论(0)