今回は、Vue.js の双方向バインディングの実装について詳しく説明します。Vue.js の双方向バインディングの実装に関する 注意点とは何ですか? ここでは実際の事例を見てみましょう。
<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>
{{ }} は、いわゆるテキスト補間メソッドであり、目的は双方向バインドされたデータを表示することです mounted は、インスタンスで呼び出される beforeDestory が呼び出されるインスタンスが破棄される前に
上記の例では、マウントされたイベントに この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 ! 推奨書籍:
Vue.js を使用して mpvue フレームワークを開発する手順の詳細な説明
以上がVue.jsの双方向バインディング実装の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。