這篇體驗一下VUE的雙向綁定
<html><head> <meta charset="utf-8"></head><body> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <div id="app"> <input type="text" v-model="CurrentTime" placeholder="當前時刻"> <h1>當前時刻{{ CurrentTime }}</h1> </div> <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實例銷毀前則會清除定時器
總結
以上所述是小編給大家介紹的Vue.js 踩坑記之雙向綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
