Maison >interface Web >js tutoriel >js code de cas de liaison bidirectionnelle simple

js code de cas de liaison bidirectionnelle simple

小云云original: 2018-03-14 18:02:551401parcourir

Cet article partage principalement avec vous le code du cas de liaison bidirectionnelle simple js. Copiez simplement le code dans la page et exécutez-le pour voir l'effet. J'espère que cela pourra aider tout le monde.

<span style="font-size: 14px;"><!DOCTYPE html><html lang="en"><head><br/>    <meta charset="UTF-8"><br/>    <title>Title</title></head><body><input type="text" id="myinput" ><script><br/>    function watch(obj,key,callback) {<br/>        var old = obj[key];        Object.defineProperty(obj,key,{<br/>            set:function(val){<br/>                var oldVal = old;<br/>                old = val;<br/>                callback(val,oldVal,this);<br/>            },<br/>            get:function(){<br/>                return old;<br/>            }<br/>        });<br/>    }    var input = document.getElementById("myinput");    var obj = {};<br/>    watch(obj, "input",function (val) {<br/>        input.value = val;<br/>        console.log("这里是不管view层，还是module层修改后的回调，最后设置的值是"+val);<br/>    });<br/><br/>    input.onkeyup = function () {<br/>        obj.input = input.value;<br/>    };</script></body></html><br/></span>

Test de code

Si vous modifiez la valeur dans l'entrée, vous verrez la nouvelle valeur imprimé sur la console. La valeur de
Modifiez la valeur de obj.input dans la console, la valeur dans la zone de saisie changera également en conséquence, et le l'événement sera déclenché pour obtenir la nouvelle valeur

Recommandations associées :

Partage de trois méthodes de mise en œuvre de deux- liaison de données de manière en JavaScript

Implémenter facilement la liaison bidirectionnelle des compétences javascript data_javascript

Compréhension approfondie du principe de mise en œuvre de la liaison bidirectionnelle vue.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!

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：JavaScript se combine avec la bibliothèque jquery pour implémenter simplement des formulaires en un clicArticle suivant：JavaScript se combine avec la bibliothèque jquery pour implémenter simplement des formulaires en un clic

Articles Liés

Voir plus