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

Analyse des allgemeinen MySQL-Abfrageprotokolls und des langsamen Abfrageprotokolls

Die Protokolle in MySQL umfassen: Fehlerprotokoll...

Codebeispiele für allgemeine Docker-Datenvolumenvorgänge

Wenn der Entwickler Dockerfile zum Erstellen des ...

Vergleich verschiedener Möglichkeiten zur Messung der Leistung von JavaScript-Funktionen

Inhaltsverzeichnis Überblick Leistung.jetzt Konso...

Reines js, um einen Schreibmaschineneffekt zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

Techniken zur Optimierung von MySQL-Paging-Abfragen

In Anwendungen mit Paging-Abfragen sind Abfragen,...

Detaillierte Erklärung der verfügbaren Umgebungsvariablen in Docker Compose

Mehrere Teile von Compose befassen sich in irgend...

Codebeispiele für MySQL-Batchoperationsanweisungen „Select“, „Insert“ und „Update“

In Projekten werden häufig Batch-Operationsanweis...

Detaillierte Schritte zur Entwicklung von WeChat-Miniprogrammen mit Typescript

Auf die Vorteile von Typescript müssen wir nicht ...

Detaillierte Erklärung der Lösung für den Absturz von Tomcat beim Doppelklicken auf startup.bat

Als Programmierer, der gerade Tomcat gelernt hat,...

CentOS7 verwendet RPM-Paket zur Installation von MySQL 5.7.18

veranschaulichen Dieser Artikel wurde am 20.05.20...

Kreisförmiger Fortschrittsbalken mit CSS implementiert

Ergebnisse erzielen Implementierungscode html <...

Einführung in den Prozess der Verwendung der NFS-Remote-Verzeichnismontage in der CentOS-Umgebung

Inhaltsverzeichnis 1. Einführung in NFS 2. NFS-Ko...

Erfahren Sie mehr über den Hyperlink A-Tag

fragen: Ich habe den Hyperlink mit CSS formatiert...

Prinzip der Ereignisdelegierung in JavaScript

Inhaltsverzeichnis 1. Was ist Eventdelegation? 2....

Eine Screenshot-Demo basierend auf Canvas in HTML

Geschrieben am Anfang Ich erinnere mich, dass ich...