suchen

Heim >WeChat-Applet >Mini-Programmentwicklung >Detaillierte Erläuterung der bidirektionalen Bindungsimplementierung von Vue.j

Detaillierte Erläuterung der bidirektionalen Bindungsimplementierung von Vue.j

ringa_lee
ringa_leeOriginal
2018-05-04 15:41:322460Durchsuche

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die bidirektionale Bindungsimplementierung von Vue.j ausführlich erläutern sehen. 

<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>

{{ }} ist die sogenannte Textinterpolationsmethode. Der Zweck besteht darin, bidirektional gebundene Daten anzuzeigen.

montiert bedeutet, dass el gemountet ist auf der Instanz Das -Ereignis

beforeDestory wird aufgerufen, bevor die Instanz zerstört wird. Im obigen Beispiel wird jedes Mal ein

Timer

im gemounteten Ereignis erstellt Die Zeit wird in einer Sekunde in das Textfeld geschrieben. Aufgrund der bidirektionalen Bindung ändert sich auch der Text des H1-Tags und stimmt mit dem Text des Textfelds überein. Im beforeDestory-Ereignis wird der Timer gelöscht, bevor die Vue-Instanz zerstört wird. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Entwicklung des MPvue-Frameworks mit Vue.js


Zusammenfassung des Allgemeinwissens Punkte in Vue-Praxisprojekten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der bidirektionalen Bindungsimplementierung von Vue.j. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So passen Sie Bilder in WeChat-Miniprogrammen an die Körpergröße des Models anNächster Artikel：So passen Sie Bilder in WeChat-Miniprogrammen an die Körpergröße des Models an

In Verbindung stehende Artikel

Mehr sehen