zoukankan      html  css  js  c++  java
  • js-变量实现双向绑定

    单向数据绑定

    指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里

    缺点:一旦HTML代码生成就没有办法改变,如果有新数据重新传入,就必须重新把模板和数据整合到一起插入到文档流中

    数据双向绑定

    数据模型和视图之间的双向绑定,用户在视图上的修改会自动同步到数据模型中,同样的,如果数据模型中的值发生变化,也会同步到视图中去。

    优点:无需进行类似单向数据绑定的那些CRUD操作。

    底层实现大概有两种:

    1.手动绑定,同时使用dirty check去循环监听。(代表angular js)

    2.前端数据劫持,使用define Property,(代表Vue js)

    以下是一个简单的小例子,在input框里输入什么,后面就会显示什么

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <input type="text" id="aa"/>
    <span id="bb">{{hello}}</span>
    <script>
        var obj = {};
        Object.defineProperty(obj,'hello',{
            set:function(val){
                document.getElementById('bb').innerHTML = val;
                document.getElementById('aa').value = val;
            }
        });
        document.getElementById('aa').onkeyup = function(e){
            obj.hello = e.target.value;
        };
        obj.hello = "";
    
    
    </script>
    </body>
    </html>
    View Code

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    spring快速入门
    Vue整合ElementUI搭建项目
    .Net的Rsa解密
    Maven配置国内仓库
    pom.xml
    SpringBoot文件打包后修改配文件
    .net 过滤器
    c#语法糖汇总
    git修改远程地址
    abp Application层,接口服务层,获取请求的信息
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/15018890.html
Copyright © 2011-2022 走看看