Heim > Artikel > Web-Frontend > js-Code implementiert ein Beispiel für die bidirektionale Datenbindung von Vue

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

小云云Original: 2018-02-24 14:20:192460Durchsuche

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属性时执行
                },
            });

<!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>

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!

访问器 JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel für das Parsen von js-Prototyp und call()Nächster Artikel：Beispiel für das Parsen von js-Prototyp und call()

In Verbindung stehende Artikel

Mehr sehen