VueJS - Watch-Eigenschaft

In diesem Kapitel erfahren Sie mehr über die Watch-Eigenschaft. Anhand eines Beispiels werden wir sehen, dass wir die Watch-Eigenschaft in VueJS verwenden können.

Beispiel

<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>

Im obigen Code haben wir zwei Textfelder erstellt, eines mit kilometers und ein anderer mit meters. In der Dateneigenschaft werden die Kilometer und Meter auf 0 initialisiert. Es wird ein Überwachungsobjekt mit zwei Funktionen erstelltkilometers und meters. In beiden Funktionen erfolgt die Umrechnung von Kilometern in Meter und von Metern in Kilometer.

Während wir Werte in eines der Texboxen eingeben, je nachdem, was geändert wird, kümmert sich Watch um die Aktualisierung beider Textfelder. Wir müssen keine Ereignisse speziell zuweisen und warten, bis sie sich ändern, und die zusätzliche Arbeit der Validierung erledigen. Watch kümmert sich um die Aktualisierung der Textfelder mit der Berechnung in den jeweiligen Funktionen.

Werfen wir einen Blick auf die Ausgabe im Browser.

Geben Sie einige Werte in das Kilometer-Textfeld ein und sehen Sie, wie sie sich im Meter-Textfeld ändern und umgekehrt.

Lassen Sie uns nun das Textfeld Meter eingeben und sehen, wie es sich im Textfeld Kilometer ändert. Dies ist die Anzeige im Browser.