VueJS - Guarda la proprietà
In questo capitolo impareremo a conoscere la proprietà Watch. Usando un esempio, vedremo che possiamo usare la proprietà Watch in VueJS.
Esempio
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
Kilometers : <input type = "text" v-model = "kilometers">
Meters : <input type = "text" v-model = "meters">
</div>
<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 = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
</script>
</body>
</html>Nel codice sopra, abbiamo creato due caselle di testo, una con kilometers e un altro con meters. Nella proprietà data, i chilometri e i metri vengono inizializzati a 0. Esiste un oggetto orologio creato con due funzionikilometers e meters. In entrambe le funzioni viene eseguita la conversione da chilometri a metri e da metri a chilometri.
Quando inseriamo valori all'interno di una qualsiasi delle caselle di testo, a seconda di quale viene modificata, Watch si occupa di aggiornare entrambe le caselle di testo. Non dobbiamo assegnare in modo speciale alcun evento e attendere che cambi e fare il lavoro extra di convalida. Watch si occupa di aggiornare le caselle di testo con il calcolo fatto nelle rispettive funzioni.
Diamo un'occhiata all'output nel browser.
Inseriamo alcuni valori nella casella di testo dei chilometri e vediamo che cambia nella casella di testo dei metri e viceversa.
Entriamo ora nella casella di testo metri e vediamo che cambia nella casella di testo chilometri. Questa è la visualizzazione visualizzata nel browser.
