zoukankan      html  css  js  c++  java
  • 利用原生JS实现VUE中的双向绑定

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    
    <body>
        <input type="text" id="userName">
        <br>
        <span id="uName"></span>
        <script>
            var obj = {
                pwd: "1234"
            };
            //主要使用到了get和set方法,最为关键
            Object.defineProperty(obj, "userName", {
                get: function() {
                    console.log('get init');
                },
                set: function(val) {
                    console.log("set init");
                    document.getElementById("uName").innerText = val;
                    document.getElementById("userName").value = val;
                }
            });
            document.getElementById("userName").addEventListener("keyup", function(event) {
                obj.userName = event.target.value;
            })
        </script>
    </body>
    
    </html>

    运行上述的dome,可以使用控制台,obj.username=123赋值,会自动触发set方法。若我们在控制台使用obj.username拿值可以触发get方法,也就是vue的双向数据绑定的核心点。

  • 相关阅读:
    think in java
    TASLock TTASLock
    多线程
    jenkins unable to delete file
    ubuntu sun-jdk
    py2exe
    memcached安装
    redis安装
    ubuntu安装ssh
    mysql远程访问
  • 原文地址:https://www.cnblogs.com/tg666/p/12496915.html
Copyright © 2011-2022 走看看