這次帶給大家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>
{{ }} 是所謂的文字插值的方法,目的是顯示雙向綁定的資料
mounted 表示el掛載到實例上呼叫的事件
#beforeDestory 是實例銷毀先前呼叫
在上例中,在mounted事件中創建了一個計時器,每隔一秒就把當前時間寫入文字方塊中,由於雙向綁定的原因,H1標籤的文字也會跟著變化,和文字方塊的文字保持一致。在beforeDestory事件裡在Vue實例銷毀前則會清除定時器
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是Vue.js雙向綁定實作步驟說明的詳細內容。更多資訊請關注PHP中文網其他相關文章!