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