ホームページ > 記事 > ウェブフロントエンド > Vue.js 双方向バインディングの実装手順の説明
今回は、Vue.js の双方向バインディングを実装する手順をお届けします。Vue.js の双方向バインディングの実装に関する 注意事項 とは何ですか? ここでは実際のケースを見てみましょう。
この記事はVUEの双方向バインディングを体験するための記事です<html> <head> <meta charset="utf-8"> </head> <body> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <p id="app"> <input type="text" v-model="CurrentTime" placeholder="当前时刻"> <h1>当前时刻{{ CurrentTime }}</h1> </p> <script> var app = new Vue({ el:'#app', data:{ CurrentTime: new Date() }, mounted:function(){ var _this = this; this.timer = setInterval(function(){ _this.CurrentTime = new Date(); },1000); }, beforeDestroy:function(){ if(this.timer){ clearInterval(this.timer); } } }); </script> </body> </html>
{{ }}はいわゆるテキスト補間方式で、双方向バインディングデータを表示するのが目的ですマウントとはelインスタンスにマウントされ、呼び出されますbeforeDestory は、インスタンスが破棄される前に呼び出されます 上記の例では、マウントされたイベントに この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 ! 推奨読書:
vue mint-uiタブバーコンポーネントの使用手順の詳細な説明
以上がVue.js 双方向バインディングの実装手順の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。