le code js implémente un exemple de liaison de données bidirectionnelle Vue-js tutoriel-php.cn

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

小云云

Libérer： 2018-02-24 14:20:19

original

2499 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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!