Maison > Article > interface Web > Analyse pratique du projet de liaison bidirectionnelle Vue.js

Analyse pratique du projet de liaison bidirectionnelle Vue.js

php中世界最好的语言original: 2018-06-01 11:29:501260parcourir

Cette fois, je vais vous apporter une analyse pratique du projet de liaison bidirectionnelle Vue.js. Quelles sont les précautions pour la mise en œuvre réelle du projet de liaison bidirectionnelle Vue.js. est un cas pratique, jetons-y un coup d'œil.

Cet article concerne l'expérience de la liaison bidirectionnelle de 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>

{{ }} est la méthode dite d'interpolation de texte, la le but est d'afficher la liaison bidirectionnelle. Certaines données

montées signifient que el est monté sur l'événement appelé sur l'instance

beforeDestory est le

appelé avant la destruction de l'instance. Dans l'exemple ci-dessus, dans Un timer est créé dans l'événement monté et l'heure actuelle est écrite dans la zone de texte toutes les secondes en raison des deux sens. liaison, le texte de la balise H1 changera également en conséquence et le texte de la zone de texte sera cohérent. 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 :

Comment utiliser Vue pour recadrer le composant d'aperçu

Comment utiliser Vue pour le rendre planable dans le coin supérieur droit de la page /masquer le menu

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：L'envoi d'une demande de publication via axios a révélé que springMVC ne pouvait pas recevoir de paramètres (tutoriel détaillé)Article suivant：L'envoi d'une demande de publication via axios a révélé que springMVC ne pouvait pas recevoir de paramètres (tutoriel détaillé)

Articles Liés

Voir plus