Propriétés Watch de Vue.js
Dans ce chapitre, nous allons présenter les propriétés watch de Vue.js. Nous pouvons utiliser watch pour répondre aux changements de données.
L'exemple suivant implémente un compteur en utilisant watch :
Exemple
< div id = " app " >
< p style = " font-size:25px; " > Compteur : {{ counter }} </ p >
< button @ click = " counter++ " style = " font-size:25px; " > Cliquez-moi </ button >
</ div >
< script type = " text/javascript " > var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('The counter value changed from ' + oval + ' to ' + nval + '!');
}); </ script >
Essayez-le vous-même »
L'exemple suivant effectue la conversion entrekilomètres etRiz et mètres :
Exemple
< div id = " computed_props " > Kilomètres : < input type = " text " v-model = " kilomètres " > Mètres : < input type = " text " v-model = " meters " >
</ div >
< p id = " info " > </ p >
< script type = " text/javascript " > var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch is an instance method
vm.$watch('kilometers', function (newValue, oldValue) {
// This callback will be called after vm.kilometers changes
document.getElementById ("info").innerHTML = "Value before modification: " + oldValue + ", value after modification: " + newValue;
}) </ script >
Essayez-le vous-même »
Cliquez sur le bouton « Essayez-le vous-même » pour voir l'exemple en ligne
Dans le code ci-dessus, nous avons créé deux champs de saisie. Dans la propriété data, les valeurs initiales de kilometers et meters sont 0. L'objet watch crée deux méthodes de surveillance pour l'objet data : kilometers et meters.
Lorsque nous saisissons des données dans les champs de saisie, watch surveille les modifications des données en temps réel et modifie sa propre valeur. Vous pouvez regarder la démonstration vidéo suivante :
Autres extensions