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

Probleme bei der Verwendung mehrerer einfacher und dreifacher Anführungszeichen in MySQL concat

Beim dynamischen Verketten von Zeichenfolgen verw...

Erstellen eines statischen Jenkins Docker-Agentknotens

Ein statischer Knoten ist auf einer Maschine fixi...

Grafisches Tutorial (Fenster) zur Installation und Konfiguration von MySQL 5.7.21

Installieren Sie mysql5.7.21 in der Fensterumgebu...

So konfigurieren Sie den Whitelist-Zugriff in MySQL

Schritte zum Konfigurieren des Whitelist-Zugriffs...

So konfigurieren Sie SSH/SFTP und legen Berechtigungen unter dem Linux-Betriebssystem fest

Im Vergleich zu FTP bietet der SSH-basierte SFTP-...

Detaillierte Erklärung, wie Sie alle untergeordneten Elemente mit CSS auswählen

Wie wähle ich mit CSS rekursiv alle untergeordnet...

Detaillierte Erläuterung der SRIOV-Passthrough-Konfiguration und Leistungstests basierend auf KVM

SRIOV-Einführung, VF-Passthrough-Konfiguration un...

Drei Möglichkeiten zum Implementieren eines Textfarbverlaufs in CSS

Bei der Entwicklung von Web-Frontends entwerfen U...

So verstehen Sie den Unterschied zwischen „Berechnet“ und „Beobachten“ in Vue

Inhaltsverzeichnis Überblick berechnet Überwachun...

Miniprogramm zur Implementierung der Sieve-Lotterie

In diesem Artikelbeispiel wird der spezifische Co...

Analysieren Sie den Unterschied zwischen berechnet und beobachtet in Vue

Inhaltsverzeichnis 1. Einführung in die Computert...

Lebenszyklus und Ausführungsreihenfolge von React-Class-Komponenten

1. Zwei Möglichkeiten zum Definieren von Reaktion...

Ein- und Ausblenden von HTML-Elementen durch Anzeige oder Sichtbarkeit

Manchmal müssen wir steuern, ob HTML-Elemente auf ...

Detaillierte Erläuterung nativer Javascript-Vererbungsmethoden und ihrer Vor- und Nachteile

Inhaltsverzeichnis Vorwort Prototypische Vererbun...

So konfigurieren Sie Bash-Umgebungsvariablen in Linux

Shell ist ein in der Programmiersprache C geschri...