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:322374parcourir
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!