数据双向绑定

最新推荐文章于 2023-10-10 10:35:42 发布

VIP文章慕森

最新推荐文章于 2023-10-10 10:35:42 发布

阅读量888

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/bury_/article/details/79538478

版权

1.数据双向绑定概述

双向绑定即：在模板中的数据发生变化的时候，模型对象也要发生改变；模型对象中的数据改变时，视图中的数据也要发生改变。
举个栗子：
如果要用JS原生代码实现input输入框和对象中的属性值保持一致，双向绑定如何写？
思路就是：监听输入框的input事件（不能是change事件，change事件要求输入的值改变并且元素失去焦点以后才触发），当输入框的value改变的时候用这个value去更新模型对象中“绑定”的属性的值；而模型对象中的属性值改变怎么监测呢？属性的值定义为访问器属性就可以了，set函数可以允许我们在设置对象属性值的时候进行相应的操作。很清晰的思路，那么来实现一下吧。

2.实现

width="100%" height="300" src="//jsfiddle.net/senmu/jfho4bvd/embedded/" allowfullscreen="allowfullscreen">

对象值的改变可以在控制台输入obj.value=”xxx”

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                数据双向绑定
            </title>
            <style>
                div {
                  margin: 10px;
                }

最低0.47元/天解锁文章

慕森

关注

0
点赞
踩
1

收藏

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

1.数据双向绑定概述双向绑定即：在模板中的数据发生变化的时候，模型对象也要发生改变；模型对象中的数据改变时，视图中的数据也要发生改变。举个栗子：如果要用JS原生代码实现input输入框和对象中的属性值保持一致，双向绑定如何写？思路就是：监听输入框的input事件（不能是change事件，change事件要求输入的值改变并且元素失去焦点以后才触发），当输入框的value改变的时候用这...
复制链接

扫一扫