Vue.js踩坑記之雙向綁定

這篇體驗一下VUE的雙向綁定

成都創(chuàng)新互聯長期為1000多家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態(tài)環(huán)境。為臨城企業(yè)提供專業(yè)的成都網站制作、成都網站設計，臨城網站改版等技術服務。擁有十余年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

<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="當前時刻">
    <h2>當前時刻{{ CurrentTime }}</h2>
  </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>

Vue.js 踩坑記之雙向綁定 

{{ }} 是所謂的文本插值的方法，目的是顯示雙向綁定的數據

mounted 表示el掛載到實例上調用的事件

beforeDestory 是實例銷毀以前調用

在上例中，在mounted事件中創(chuàng)建了一個定時器，每隔一秒就把當前時間寫入文本框中，由于雙向綁定的原因，H1標簽的文本也會跟著變化，和文本框的文本保持一致。在beforeDestory事件里在Vue實例銷毀前則會清除定時器

總結

以上所述是小編給大家介紹的Vue.js 踩坑記之雙向綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯網站的支持！

網站名稱：Vue.js踩坑記之雙向綁定
文章鏈接：http://bm7419.com/article48/pcdiep.html

成都網站建設公司_創(chuàng)新互聯，為您提供電子商務、網站設計、小程序開發(fā)、ChatGPT、建站公司、標簽優(yōu)化

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

外貿網站制作