Transkript der Implementierung berechneter Vue-Eigenschaften

Transkript der Implementierung berechneter Vue-Eigenschaften

In diesem Artikel wird das Implementierungszeugnis für Vue-Berechnungseigenschaften zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <title>Transkriptstatistik</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   .gridtable{
    Schriftfamilie: Verdana, Arial, serifenlos;
    Schriftgröße: 11px;
    Farbe: #333333;
    Rahmenbreite: 1px;
    Rahmenfarbe: #666666;
    Rahmen-Zusammenbruch: Zusammenbruch;
   }
   .gridtable th{
    Rahmenbreite: 1px;
    Polsterung: 8px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: #666666;
    Hintergrundfarbe: #dedede;
   }
   .gridtable td{
    Rahmenbreite: 1px;
    Polsterung: 8px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: #666666;
    Hintergrundfarbe: #ffffff;
   }
  </Stil>
 </Kopf>
 <Text>
  
  <div id="app">
   <Tabelle Klasse="Rastertabelle">
    <tr>
     <th>Betreff</th>
     <th>Punktzahl</th>
    </tr>
    <tr>
     <td>Sprache</td>
     <td>
      <input type="text" name="" id="" value="" v-model.number="Chinesisch" />
     </td>
    </tr>
    <tr>
     <td>Mathematik</td>
     <td>
      <input Typ="Text" Name="" ID="" Wert="" v-Modell.Nummer="Mathematik" />
     </td>
    </tr>
    <tr>
     <td>Englisch</td>
     <td>
      <input type="text" name="" id="" value="" v-model.number="Englisch" />
     </td>
    </tr>
    <tr>
     <td>Gesamtpunktzahl</td>
     <td>
      <input Typ="Text" Name="" ID="" Wert="" v-Modell.Nummer="Summe" />
     </td>
    </tr>
    <tr>
     <td>Durchschnittsnote</td>
     <td>
      <input Typ="Text" Name="" ID="" Wert="" v-Modell.Nummer="Durchschnitt" />
     </td>
    </tr>
   </Tabelle>
  </div>
  
  <Skript>
   var vm = neuer Vue({
    el:"#app",
    Daten:{
     Englisch:100,
     Mathe:100,
     Englisch:60
    },
    berechnet:{
     Summe:Funktion(){
      gib dies.Chinesisch+dieses.Mathematik+dieses.Englisch zurück;
     },
     Durchschnitt:Funktion(){
      gibt Math.round(diese.Summe/3) zurück;
     }
    },
    
   })
  </Skript>
 </body>
</html>

Wenn ich die Punktzahlen für Chinesisch, Mathematik und Englisch ändere, ändern sich die Gesamtpunktzahl und die Durchschnittspunktzahl in Echtzeit. Dies ist die Eigenschaft der berechneten Eigenschaften von Vue.

Übergabe berechneter Eigenschaftsparameter durch Vue

Eine berechnete Eigenschaft ist im Wesentlichen eine Methode, wird aber normalerweise als Eigenschaft verwendet, normalerweise ohne (). Wenn Sie jedoch bei der tatsächlichen Entwicklung Parameter an die Methode im berechneten Attribut übergeben müssen, müssen Sie die Methode zur Closure-Parameterübergabe verwenden.

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <title>Auswerten</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <div id="app">
   {{hinzufügen(2)}}
  </div>
  
  <Skripttyp="text/javascript">
   var vm = neuer Vue({
    el:"#app",
    Daten:{
     Nummer:1
    },
    berechnet:{
     hinzufügen(){
      Rückgabefunktion (Index) {
       gib diese Zahl+Index zurück;
      }
     }
    }
   })
  </Skript>
 </Kopf>
 <Text>
 </body>
</html>

Beachten:

  • Die berechnete Eigenschaft selbst kann die Parameter in den Klammern nicht wie die Methode ausfüllen, um den Zweck der Parameterübergabe zu erreichen. Die eigentliche Methode muss in den Methodenkörper geschrieben werden, um die Parameter zu akzeptieren.
  • Ebenso können die Body-Parameter der berechneten Attributmethode weggelassen werden, d. h. in diesem Beispiel sind sowohl add(){} als auch add(index){} zulässig.

Berechnete Eigenschaftsgetter und -setter

Berechnete Eigenschaften werden normalerweise zum Abrufen von Daten verwendet (ändern sich entsprechend den Datenänderungen), sodass sie standardmäßig nur Getter haben, aber Vue.js stellt bei Bedarf auch Setter-Funktionen bereit. Die Reihenfolge der Set-Methode und der Get-Methode ist unabhängig voneinander, und der von der Set-Methode akzeptierte Parameter ist der Rückgabewert der Get-Methode.

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8" />
  <title>Berechnet</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </Kopf>
 <Text>
  
  <div id="app">
   Vorname:<input type="text" name="" id="" value="" v-model="first"/>
   Nachname:<input type="text" name="" id="" value="" v-model="last"/>
   <p>vollständigerName:<input type="text" name="" id="" value="" v-model="vollständigerName"/></p>
  </div>
  <Skripttyp="text/javascript">
   var vm = neuer Vue({
    el:"#app",
    Daten:{
     zuerst:"Jack",
     zuletzt:"Jones"
    },
    berechnet:{
     vollständiger Name:
      bekomme:Funktion(){
       gib dies.zuerst zurück+" "+dieses.letztes
      },
      setze:Funktion(Parameter){
       Variablennamen = Parameter.split(" ")
       this.first = Namen[0]
       this.last = Namen[Namen.Länge-1]
      }
     }
    }
   })
  </Skript>
 </body>
</html>

Der Unterschied zwischen berechneten Eigenschaften und Methoden

Dieser Ansatz der Verwendung berechneter Eigenschaften stellt sicher, dass Code nur bei Bedarf ausgeführt wird, sodass er für die Handhabung potenziell ressourcenintensiver Arbeiten geeignet ist. Wenn das Projekt jedoch nicht über Caching-Funktionen verfügt, sollten je nach tatsächlicher Situation Methoden verwendet werden.

Die Merkmale der berechneten Eigenschaften sind wie folgt:

①Wenn sich die Abhängigkeit einer berechneten Eigenschaft ändert, wird die Berechnung sofort durchgeführt und das Berechnungsergebnis automatisch aktualisiert.
②Die Auswertungsergebnisse der berechneten Eigenschaften werden für die direkte Verwendung beim nächsten Mal zwischengespeichert.
③Berechnete Eigenschaften eignen sich zum Ausführen komplexerer Ausdrücke, die oft zu lang sind oder häufig wiederholt werden müssen, sodass sie nicht direkt in Vorlagen verwendet werden können.
④Berechnete Eigenschaften sind eine erweiterte und verbesserte Version des Datenobjekts.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Ein kurzer Vortrag über berechnete Eigenschaften und das Abhören von Eigenschaften in Vue
  • Von Vue berechnete Eigenschaften
  • Einführung in berechnete Eigenschaften in Vue
  • Vue verwendet berechnete Eigenschaften, um die Erstellung dynamischer Schieberegler abzuschließen
  • Vue-Überwachungseigenschaften und berechnete Eigenschaften
  • Berechnete Eigenschaften und Datenerfassungsmethoden in Vue
  • Kennen Sie die berechneten Eigenschaften von Vue?
  • Drei Implementierungsmethoden für den berechneten Eigenschaftsnamenfall von Vue

<<:  Detaillierte Erläuterung der Implementierungsschritte von MySQL Dual-Machine Hot Standby und Load Balancing

>>:  Jmeter stellt eine Verbindung zum Datenbankprozessdiagramm her

Artikel empfehlen

Die Hook-Funktion von Vue-Router implementiert Routing Guard

Inhaltsverzeichnis Überblick Globale Hook-Funktio...

Über die Kontrolle und Verschönerung von Eingabedateien

Beim Hochladen auf einigen Websites wird nach dem...

Detaillierte Erklärung, wie eine SQL-Anweisung in MySQL ausgeführt wird

Überblick Ich habe vor Kurzem begonnen, mir Wisse...

Schnelles Verständnis und Beispielanwendung der Vuex-Zustandsmaschine

Inhaltsverzeichnis 1. Schnelles Verständnis von K...

So implementieren Sie geplante Sicherungen und inkrementelle Sicherungen hochgeladener Dateien in Linux

einführen Wenn Sie einen OSS-Speicherdienst wie A...

So importieren/speichern/laden/löschen Sie Bilder lokal in Docker

1. Docker importiert lokale Images Manchmal kopie...

Detaillierte Erläuterung von 30 SQL-Abfrageoptimierungstechniken für MySQL-Zehnmillionen großer Datenmengen

1. Um die Abfrage zu optimieren, sollten Sie voll...

Zusammenfassung der allgemeinen APIs und erweiterten APIs von Vue

Inhaltsverzeichnis nächstesTick Mixins $forceUpda...

Vollständige Liste der CentOS7-Firewall-Betriebsbefehle

Inhaltsverzeichnis Installieren: 1. Grundlegende ...

Awk-Befehlszeile oder Skript, das Ihnen beim Sortieren von Textdateien hilft (empfohlen)

Awk ist ein leistungsfähiges Tool, das einige Auf...

Tutorial zur Installation einer MySQL-ZIP-Datei

In diesem Artikel wird die spezifische Methode zu...

Implementierung von Vergleichen, Sortieren und anderen Operationen für Daten vom Typ varchar in MySQL

Bei der Verwendung von MySQL werden Daten im Allg...

MySQL-Prozesssteuerung: IF()-, IFNULL()-, NULLIF()-, ISNULL()-Funktionen

In MySQL können Sie die Funktionen IF(), IFNULL()...

Detaillierte Erklärung der CSS-Elastic-Box Flex-Grow, Flex-Shrink und Flex-Basis

Die Funktionen der drei Attribute Flex-Grow, Flex...

Eine einfache und effektive Lösung, um das ursprüngliche Passwort bei der Installation von MySQL zu vergessen

Wenn Sie MySQL installieren, wird Ihnen ein erste...