Vue.js Watch-Eigenschaften
In diesem Kapitel stellen wir Vue.js Watch-Eigenschaften vor. Wir können watch verwenden, um auf Datenänderungen zu reagieren.
Das folgende Beispiel implementiert einen Zähler mit watch:
Beispiel
< div id = " app " >
< p style = " font-size:25px; " > Zähler: {{ counter }} </ p >
< button @ click = " counter++ " style = " font-size:25px; " > Klick mich </ button >
</ div >
< script type = " text/javascript " > var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('Der Zählerwert hat sich von ' + oval + ' zu ' + nval + ' geändert!');
}); </ script >
Selbst ausprobieren »
Das folgende Beispiel führt die Umrechnung zwischenKilometern undReis und Metern durch:
Beispiel
< div id = " computed_props " > Kilometer : < input type = " text " v-model = " kilometers " > Meter : < 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 ist eine Instanzmethode
vm.$watch('kilometers', function (newValue, oldValue) {
// Dieser Callback wird aufgerufen, nachdem sich vm.kilometers geändert hat
document.getElementById ("info").innerHTML = "Wert vor Änderung: " + oldValue + ", Wert nach Änderung: " + newValue;
}) </ script >
Selbst ausprobieren »
Klicken Sie auf die Schaltfläche "Try it Yourself", um das Online-Beispiel anzuzeigen
Im obigen Code haben wir zwei Eingabefelder erstellt. In der data-Eigenschaft sind die Anfangswerte von kilometers und meters beide 0. Das watch-Objekt erstellt zwei Überwachungsmethoden für das Datenobjekt: kilometers und meters.
Wenn wir Daten in die Eingabefelder eingeben, überwacht watch Datenänderungen in Echtzeit und ändert seinen eigenen Wert. Sie können sich die folgende Videodemonstration ansehen:
Andere Erweiterungen