Maison > Article > interface Web > Liaison de données bidirectionnelle Front-end JS

Liaison de données bidirectionnelle Front-end JS

小云云original: 2017-12-08 16:16:571911parcourir

Dans cet article, nous partagerons avec vous la liaison de données bidirectionnelle front-end js. Nous espérons qu'elle sera utile à tout le monde.

<html>
<head>
    <title>textBind</title> 
</head>
<body>
<input type="text" name="infoInsert"> 
<p id="infoShow"></p>
<script type="text/javascript">
    var obj = {
        seeYou: &#39;Hello&#39;
    };
    Object.defineProperty(obj, &#39;infoBind&#39;, {
        get: function () {
            return this.seeYou;
        },
        set: function (newValue) {
            document.getElementById(&#39;infoShow&#39;).innerText = newValue;
            document.getElementsByName(&#39;infoInsert&#39;)[0].value = newValue;
        }
    });
    document.getElementsByName(&#39;infoInsert&#39;)[0].addEventListener(&#39;keyup&#39;, function () {
        obj.infoBind = this.value;
    });
</script>
</body>
</html>

Grâce au code ci-dessus, il n'est pas difficile de voir que le principe d'implémentation sous-jacent de la liaison de données bidirectionnelle utilisé dans le framework est implémenté via l'attribut DefineProperty dans ES5.

Recommandations associées :

Méthode JS pour implémenter une liaison de données bidirectionnelle

données du composant parent-enfant React.js affichage d'un exemple de communication en temps réel de liaison

Exemple simple et détaillé de liaison de données bidirectionnelle AngularJS

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!

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：Quatre types de boucles for en jsArticle suivant：Quatre types de boucles for en js

Articles Liés

Voir plus