Maison > Article > Applet WeChat > Explication détaillée de l'implémentation de la liaison bidirectionnelle Vue.js

Explication détaillée de l'implémentation de la liaison bidirectionnelle Vue.js

ringa_leeoriginal: 2018-05-04 15:41:322417parcourir

Cette fois, je vais vous apporter une explication détaillée de l'implémentation de la liaison bidirectionnelle de Vue.js. Quelles sont les précautions pour l'implémentation de la liaison bidirectionnelle de Vue.js. Voici des cas pratiques, prenons un. regarder.

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

{{ }} est la méthode dite d'interpolation de texte, le but est d'afficher des données liées dans les deux sens

moyens montés el est monté sur L'événement

beforeDestory appelé sur l'instance est appelé

avant que l'instance ne soit détruite. Dans l'exemple ci-dessus, un timer est. créé dans l'événement monté. L'heure actuelle est écrite dans la zone de texte toutes les secondes. En raison de la liaison bidirectionnelle, le texte de la balise H1 changera également et restera cohérent avec le texte de la zone de texte. Dans l'événement beforeDestory, le minuteur sera effacé avant la destruction de l'instance Vue

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

Explication détaillée des étapes pour développer le framework mpvue avec Vue.js

Un résumé des points de connaissances en vue de projets pratiques

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment adapter les images dans les mini programmes WeChat à la hauteur du modèleArticle suivant：Comment adapter les images dans les mini programmes WeChat à la hauteur du modèle

Articles Liés

Voir plus