js-Code implementiert ein Beispiel für die bidirektionale Datenbindung von Vue-js-Tutorial-php.cn

js-Code implementiert ein Beispiel für die bidirektionale Datenbindung von Vue

小云云

Freigeben： 2018-02-24 14:20:19

Original

2459 Leute haben es durchsucht

Bei bidirektionalen Datenbindungsinterviews werden Sie im Allgemeinen gebeten, zunächst die Verwendung von Accessor-Attributen und Zeitbeziehungen zu verstehen und ihn zu analysieren, wenn Sie Zeit haben.

Object.defineProperty(obj,propertyName,{                get:function(){
                    //读取obj对象的propertyName属性时执行
                },                set:function(currvalue){
                    //修改obj对象的propertyName属性时执行
                },
            });

Nach dem Login kopieren

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js实现vue双向数据绑定 利用访问器属性</title></head><body>
    <input bind-value="value" type="text" placeholder="请输入..."  id="user-input">
    <p bind-text="value" id="show-input"></p>
    <script>
    var elems=[document.getElementById(&#39;user-input&#39;),document.getElementById(&#39;show-input&#39;)];        var data={
            initValue:&#39;&#39;,
        };        function define(obj,propertyName) {
            Object.defineProperty(obj,propertyName,{
                get:function(){
                    return this.initValue;
                },
                set:function(currvalue){
                    this.initValue=currvalue;                    //同步p
                    scan();
                },
            });
        }

        define(data,&#39;value&#39;);
        data.value=&#39;&#39;;
        scan();        //监听事件
        elems[0].addEventListener(&#39;keyup&#39;,function(e){
            var e=e||window.event;
            data.value=e.target.value;
        });        function scan(){
            for(var i=0;i<elems.length;i++){                var ele=elems[i];                for(var j=0;j<ele.attributes.length;j++){                    var attr=ele.attributes[j];                    if(attr.nodeName.indexOf(&#39;bind&#39;)>=0){
                        elems[1].innerHTML=data.value;
                        elems[0].setAttribute(&#39;current-values&#39;,data.value);
                    }
                }
            }
        }    </script></body></html>

Nach dem Login kopieren

Verwandte Empfehlungen:

Vue bidirektionale Datenbindungs-Quellcode-Analyse

js implementiert Zwei-Wege-Datenbindungsmethode

Front-End-JS-Zwei-Wege-Datenbindung

Das obige ist der detaillierte Inhalt vonjs-Code implementiert ein Beispiel für die bidirektionale Datenbindung von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!