Home > Article > Web Front-end > Front-end js two-way data binding

Front-end js two-way data binding

小云云Original: 2017-12-08 16:16:571966browse

In this article, we will share with you the front-end js two-way data binding, hoping it will be helpful to everyone.

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

Through the above code, it is not difficult to see that the underlying implementation principle of two-way data binding used in the framework is implemented through the defineProperty attribute in ES5.

Related recommendations:

JS method to implement two-way data binding

react.js parent-child component data binding real-time Communication example display

AngularJS two-way data binding detailed simple example

The above is the detailed content of Front-end js two-way data binding. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Four kinds of for loops in jsNext article：Four kinds of for loops in js

See more

Front-end js two-way data binding

Related articles