Vue.js踩坑記之雙向綁定

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

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

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

mounted 表示el掛載到實例上調(diào)用的事件

beforeDestory 是實例銷毀以前調(diào)用

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

總結(jié)

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

網(wǎng)站名稱：Vue.js踩坑記之雙向綁定
文章鏈接：http://vcdvsql.cn/article48/pcdiep.html

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

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

猜你還喜歡下面的內(nèi)容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

Vue.js踩坑記之雙向綁定