Maison >interface Web >js tutoriel >le code js implémente un exemple de liaison de données bidirectionnelle Vue

le code js implémente un exemple de liaison de données bidirectionnelle Vue

小云云original: 2018-02-24 14:20:192536parcourir

Les entretiens de liaison de données bidirectionnels vous demandent généralement de d'abord comprendre l'utilisation des attributs d'accès et des relations temporelles. Collez d'abord le code et analysez-le lorsque vous aurez le temps. J'espère que cet article pourra aider tout le monde.

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>

Recommandations associées :

Analyse du code source de liaison de données bidirectionnelle Vue

implémentations js Méthode de liaison de données bidirectionnelle

Liaison de données bidirectionnelle Front-end js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

访问器 JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple d'analyse du prototype js et de l'appel ()Article suivant：Exemple d'analyse du prototype js et de l'appel ()

Articles Liés

Voir plus