Was sind die berechneten Eigenschaften von vue.js? (Codebeispiel)

In diesem Artikel stellen wir Ihnen die berechneten Eigenschaften in Vue anhand konkreter Beispiele vor.

Was ist eine berechnete Eigenschaft?

Berechnete Eigenschaften sehen in Vue wie Dateneigenschaften aus, aber wir können einige Arithmetik und Nicht-Rechnungen durchführen -Rechenaufgaben.

<template>
  <ul>
   <li>First name : {{firstName}}</li>
   <li>Last name : {{lastName}}</li>
   <li>Full name : {{firstName + &#39; &#39;+ lastName}}</li>
  </ul>
</template>

<script>
 data:function(){
     return{
         firstName: "Sai",
         lastName: "Gowtham"
     }
 }
</script>

Im obigen Code erstellen wir zwei Datenattribute firstName und lastName und fügen sie in die Vorlage ein.

Wenn Sie sich unsere Vorlage ansehen, haben wir die Logik für den vollständigen Namen in {{}} geschweifte Klammern eingefügt.

Beispiel

Beispiel für die Erstellung Ihrer ersten berechneten Eigenschaft.

Berechnete Eigenschaften werden in einem berechneten Eigenschaftsobjekt deklariert.

<template>
  <ul>
   <li>First name : {{firstName}}</li>
   <li>Last name : {{lastName}}</li>
   <!-- 计算属性 -->
   <li>Full name : {{fullName}}</li>
  </ul>
</template>

<script>
export default{
     data:function(){
     return{
         firstName: "Sai",
         lastName: "Gowtham"
     }
  },
  computed:{
      fullName:function(){
          return this.firstName+&#39; &#39;+this.lastName
      }
  }
}

Hier haben wir eine berechnete Eigenschaft namens fullName hinzugefügt, eine Funktion, die den vollständigen Namen des Benutzers zurückgibt.

Wir können berechnete Eigenschaften in Vorlagen genauso wie Dateneigenschaften verwenden.

Berechnete Eigenschaften werden von vue zwischengespeichert, sodass die Logik nur dann neu ausgewertet wird, wenn sich die zugrunde liegende Dateneigenschaft ändert. Das heißt, wenn sich Vorname oder Nachname nicht geändert haben, gibt es einfach das zuvor berechnete Ergebnis zurück, ohne die Funktion erneut auszuführen .

Verwandte Empfehlungen: „Javascript-Tutorial“

Das obige ist der detaillierte Inhalt vonWas sind die berechneten Eigenschaften von vue.js? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!