首頁  >  文章  >  web前端  >  Vue.js雙向綁定實作步驟說明

Vue.js雙向綁定實作步驟說明

php中世界最好的语言
php中世界最好的语言原創
2018-05-14 11:18:331472瀏覽

這次帶給大家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 mint-ui tabbar元件使用步驟詳解

vue地區選擇元件使用步驟詳解

以上是Vue.js雙向綁定實作步驟說明的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn