VueJS - Berechnete Eigenschaften

Wir haben bereits Methoden für die Vue-Instanz und für Komponenten gesehen. Berechnete Eigenschaften ähneln Methoden, unterscheiden sich jedoch im Vergleich zu Methoden, die in diesem Kapitel behandelt werden.

Am Ende dieses Kapitels können wir entscheiden, wann Methoden und wann berechnete Eigenschaften verwendet werden sollen.

Lassen Sie uns die berechneten Eigenschaften anhand eines Beispiels verstehen.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
         LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
         <h1>My name is {{firstname}} {{lastname}}</h1>
         <h1>Using computed method : {{getfullname}}</h1>
      </div>
      <script type = "text/javascript" src = "js/vue_computedprops.js"></script>
   </body>
</html>

vue_computeprops.js

var vm = new Vue({
   el: '#computed_props',
   data: {
      firstname :"",
      lastname :"",
      birthyear : ""
   },
   computed :{
      getfullname : function(){
         return this.firstname +" "+ this.lastname;
      }
   }
})

Hier haben wir geschaffen .htmlDatei mit Vor- und Nachnamen. Vorname und Nachname ist ein Textfeld, das mit den Eigenschaften Vorname und Nachname gebunden wird.

Wir rufen die berechnete Methode getfullname auf, die den eingegebenen Vor- und Nachnamen zurückgibt.

computed :{
   getfullname : function(){
      return this.firstname +" "+ this.lastname;
   }
}

Wenn wir das Textfeld eingeben, wird dasselbe von der Funktion zurückgegeben, wenn der Vor- oder Nachname der Eigenschaften geändert wird. Mit Hilfe von Computed müssen wir also nichts Bestimmtes tun, z. B. daran denken, eine Funktion aufzurufen. Bei der Berechnung wird es von selbst aufgerufen, da sich die in ihm verwendeten Eigenschaften ändern, dh Vor- und Nachname.

Das gleiche wird im folgenden Browser angezeigt. Geben Sie das Textfeld ein und dasselbe wird mit der berechneten Funktion aktualisiert.

Versuchen wir nun, den Unterschied zwischen einer Methode und einer berechneten Eigenschaft zu verstehen. Beides sind Objekte. Im Inneren sind Funktionen definiert, die einen Wert zurückgeben.

Im Falle einer Methode rufen wir sie als Funktion auf und berechnen sie als Eigenschaft. Lassen Sie uns anhand des folgenden Beispiels den Unterschied zwischen Methode und berechneter Eigenschaft verstehen.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
         <h1>Random No from method : {{getrandomno1()}}</h1>
         <h1  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">Random No from computed
            property: {{getrandomno}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               name : "helloworld"
            },
            methods: {
               getrandomno1 : function() {
                  return Math.random();
               }
            },
            computed :{
               getrandomno : function(){
                  return Math.random();
               }
            }
         });
      </script>
   </body>
</html>

Im obigen Code haben wir eine Methode namens aufgerufen getrandomno1 und eine berechnete Eigenschaft mit einer Funktion getrandomno. Beide geben mit Math.random () Zufallszahlen zurück.

Es wird im Browser wie unten gezeigt angezeigt. Die Methode und die berechnete Eigenschaft werden viele Male aufgerufen, um den Unterschied anzuzeigen.

Wenn wir uns die obigen Werte ansehen, werden wir sehen, dass die von der berechneten Eigenschaft zurückgegebenen Zufallszahlen unabhängig von der Häufigkeit, mit der sie aufgerufen wird, gleich bleiben. Dies bedeutet, dass bei jedem Aufruf der letzte Wert für alle aktualisiert wird. Während es sich bei einer Methode um eine Funktion handelt, wird bei jedem Aufruf ein anderer Wert zurückgegeben.

Abrufen / Festlegen in berechneten Eigenschaften

In diesem Abschnitt erfahren Sie anhand eines Beispiels, wie Sie Funktionen in berechneten Eigenschaften abrufen / festlegen.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "fullname" />
         <h1>{{firstName}}</h1>
         <h1>{{lastName}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               firstName : "Terry",
               lastName : "Ben"
            },
            methods: {
            },
            computed :{
               fullname : {
                  get : function() {
                     return this.firstName+" "+this.lastName;
                  }
               }
            }
         });
      </script>
   </body>
</html>

Wir haben ein Eingabefeld definiert, an das gebunden ist fullname, die eine berechnete Eigenschaft ist. Es gibt eine aufgerufene Funktion zurückget, die den vollständigen Namen angibt, dh den Vor- und Nachnamen. Außerdem haben wir den Vor- und Nachnamen als - angezeigt.

<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>

Lassen Sie uns das gleiche im Browser überprüfen.

Wenn wir nun den Namen im Textfeld ändern, wird dies nicht im Namen des folgenden Screenshots angezeigt.

Fügen wir die Setter-Funktion in die berechnete Eigenschaft fullname ein.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "fullname" />
         <h1>{{firstName}}</h1>
         <h1>{{lastName}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               firstName : "Terry",
               lastName : "Ben"
            },
            methods: {
            },
            computed :{
               fullname : {
                  get : function() {
                     return this.firstName+" "+this.lastName;
                  },
                  set : function(name) {
                     var fname = name.split(" ");
                     this.firstName = fname[0];
                     this.lastName = fname[1]
                  }
               }
            }
         });
      </script>
   </body>
</html>

Wir haben die set-Funktion in die Eigenschaft fullname computed eingefügt.

computed :{
   fullname : {
      get : function() {
         return this.firstName+" "+this.lastName;
      },
      set : function(name) {
         var fname = name.split(" ");
         this.firstName = fname[0];
         this.lastName = fname[1]
      }
   }
}

Es hat den Namen als Parameter, der nichts anderes als der vollständige Name im Textfeld ist. Später wird es auf Leerzeichen aufgeteilt und der Vor- und Nachname wird aktualisiert. Wenn wir nun den Code ausführen und das Textfeld bearbeiten, wird dasselbe im Browser angezeigt. Der Vorname und der Nachname werden aufgrund der eingestellten Funktion aktualisiert. Die Funktion get gibt den Vor- und Nachnamen zurück, während die Funktion set sie aktualisiert, wenn etwas bearbeitet wird.

Was auch immer in das Textfeld eingegeben wird, stimmt mit dem überein, was im obigen Screenshot angezeigt wird.