双向数据绑定

最新推荐文章于 2024-04-22 09:07:57 发布

m13070102173

最新推荐文章于 2024-04-22 09:07:57 发布

阅读量168

点赞数 1

分类专栏：心得体会文章标签：双向数据绑定

本文链接：https://blog.csdn.net/m13070102173/article/details/88871107

版权

心得体会专栏收录该内容

4 篇文章 0 订阅

订阅专栏

啥是双向数据绑定？

所谓的双向数据绑定就是把数据层和视图层关联起来，当数据层发生变化的同时，视图层发生相应的变化。

双向数据绑定的原理是啥？

这种事情其实去百度一找一大堆，怎么说的都有，但是因为每次问起某人的时候，其回答总是：用了Object.defineProperty方法。怎么实现的不知道！那可还行？
现在就给某人科普一下（敲黑板！！！知识点，爱看不看！）

首先，先介绍一下这个方法。
这个方法就相当于Object的设置方法，你可以在这个方法中设定对象的属性、属性值、属性是否可修改等等玩法。这个方法接收三个参数，写法为Object.defineProperty(obj, 属性, 配置对象)
举个栗子：

let obj = new Object(null)
Object.defineProperty(obj, 'name', {
	value = 'MDB',
	writable = false//不可写
})

当对一个对象的属性进行直接设置或读取的时候就会自行调用这个方法中的get和set属性，而双向数据绑定就是基于这个机制实现的，一个简单的栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id='input'>
    I'm<span id='name123'></span>
    <script>
        let obj = new Object()
        Object.defineProperty(obj, 'called', {
            set: function(v){
                called = v;
                name123.innerHTML = `&nbsp;${v}`
            }
        })
        input.addEventListener('keyup', function(){
            obj.called = input.value
        })
    </script>
</body>
</html>

具体的方法介绍推荐一篇非常容易找到的又讲解的比较详细的地址：
https://imweb.io/topic/56d40adc0848801a4ba198ce

m13070102173

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双向数据绑定

啥是双向数据绑定？所谓的双向数据绑定就是把数据层和视图层关联起来，当数据层发生变化的同时，视图层发生相应的变化。双向数据绑定的原理是啥？这种事情其实去百度一找一大堆，怎么说的都有，但是因为每次问起某人的时候，其回答总是：用了Object.defineProperty方法。怎么实现的不知道！那可还行？现在就给某人科普一下（敲黑板！！！知识点，爱看不看！）首先，先介绍一下这个方法。这个方法...
复制链接

扫一扫