Vue-Überwachungseigenschaften und berechnete Eigenschaften

Vue-Überwachungseigenschaften und berechnete Eigenschaften

1. Überwachungseigenschaften ansehen

Diese Eigenschaft wird verwendet, um Änderungen bestimmter Daten zu überwachen und die Ausführung der entsprechenden Rückruffunktion auszulösen.

Grundlegende Verwendung: Fügen Sie watch mit dem Wert eines Objekts hinzu. Der Attributname des Objekts sind die zu überwachenden Daten und der Attributwert ist die Rückruffunktion. Immer wenn sich der diesem Attributnamen entsprechende Wert ändert, wird die Ausführung der Rückruffunktion ausgelöst.

Die Rückruffunktion hat 2 Parameter:

  • newVal : der Wert nach der Datenänderung.
  • oldVal : der Wert vor der Datenänderung.

Schalter:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8" />
  <Titel></Titel>
  <script src="./js/vue.js"></script>
 </Kopf>
 <Text>
  <div id="app">
   <div>Zähler {{ shu }}</div>
   <span>Vor der Änderung: {{ov}}</span>
   <span>Nach der Änderung: {{nv}}</span>
   <br />
   <button @click="shu++">Füge einen hinzu</button>
  </div>
  
  <Skript>
  var vm = neuer Vue({
   el: '#app',
   Daten: {
    Schu:1,
    ov:0,
    nv:0
   },
   Methoden:{
    
   }
  })
  vm.$watch("shu",Funktion(nval,oval){
   vm.$data.ov = oval
   vm.$data.nv = nval
  })
  </Skript>
 </body>
</html>

Fügen Sie einen Listener hinzu und weisen Sie den Wert des Zählers vor der Änderung der Variablen ov und den Wert nach der Änderung der Variablen nv zu.

  vm.$watch("shu",Funktion(nval,oval){
   vm.$data.ov = oval
   vm.$data.nv = nval
  })

1.

1. Warenkorb

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <Titel></Titel>
  <script src="./js/vue.js"></script>
 </Kopf>
 <Text>
  <div id="app">
  <Tabelle>
   <tr>
    <th>Seriennummer</th>
    <th>Produktname</th>
    <th>Produktpreis</th>
    <th>Kaufmenge</th>
    <th>Betrieb</th>
   </tr>
   <tr v-for="sp in sps">
    <td>{{ sp.id }}</td>
    <td>{{ sp.name }}</td>
    <td>{{ sp.geld }}</td>
    <td>
    <button v-on:click="sp.sum=sp.sum-1">-</button>
    {{ sp.sum }}
    <button v-on:click="sp.sum=sp.sum+1">+</button>
    </td>
    <td>
     <button v-on:click="sp.sum=0">Zurücksetzen</button>
    </td>
   </tr>
  </Tabelle>
  <div >
   Gesamtpreis: {{ getmany() }}
  </div>
  </div>
  <Skript>
   var vm = neuer Vue({
    el: '#app',
    Daten: {
     sps:[
      {
       Ich würde: 1,
       Name:"Apple 13",
       Geld:6000,
       Summe:1
      },
      {
       Ich würde: 2,
       Name:"Apple 12",
       Geld: 5000,
       Summe:1
      },
      {
       Ich würde: 3,
       Name:"Apple 11",
       Geld:4000,
       Summe:1
      }
     ]
    },
    Methoden:{
     getmaney:Funktion(){
      var m=0;
      für(var x=0;x<this.sps.length;x++){
       m=m+dieses.sps[x].Geld*dieses.sps[x].Summe;
      }
      Rückkehr m;
     }
    }
   })
  </Skript>
 </body>
</html>

Die Gesamtkosten betragen:

getmaney:Funktion(){
    var m=0;
    für(var x=0;x<this.sps.length;x++){
   m=m+dieses.sps[x].Geld*dieses.sps[x].Summe;
 }
 Rückkehr m;
}

2. Alles auswählen und alles abwählen

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <Titel></Titel>
  <script src="./js/vue.js"></script>
 </Kopf>
 <Text>
  <div id="app">
   <input Typ="Kontrollkästchen" ID="a" Wert="a" v-Modell="che"/>
   <label für="a">a</label>
   <input type="checkbox" id="b" value="b" v-model="che"/>
   <label für="b">b</label>
   <input type="checkbox" v-model="aktiviert" id="bok" v-on:change="ckall()" />
   <label for="box">Alles auswählen</label>
  </div>
  <Skript>
   var vm = neuer Vue({
    el: '#app',
    Daten: {
     geprüft:false,
     che:[],
     shuzu:["a","b"]
    },
    Methoden:{
     ckall:Funktion(){
      //Alle Status auswählen if(this.checked){
       dies.che = dies.shuzu
      }anders{
       //Alle Auswahlen abbrechen this.che=[]
      }
     }
    },
    betrachten:{
     "che":Funktion(){
      //Beurteilen, ob alles ausgewählt werden soll if(this.che.length == this.shuzu.length){
       dies.geprüft = wahr
      }anders{
       dies.geprüft = falsch
      }
     }
    }
   })
  </Skript>
 </body>
</html>

2. Berechnete Eigenschaften

1.berechnet

Merkmale:

  • Definieren Sie die Methode zum Berechnen der Eigenschaft im computed Eigenschaftsobjekt und verwenden Sie {{Methodenname}} auf der Seite, um das Berechnungsergebnis anzuzeigen.
  • Anzeige und Überwachung von Eigenschaftsdaten über getter/setter .
  • Berechnete Eigenschaften werden zwischengespeichert und getter wird für mehrere Lesevorgänge nur einmal ausgeführt.
<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <Titel></Titel>
  <script src="./js/vue.js"></script>
 </Kopf>
 <Text>
  <div id="app">
   <p>{{ Chaos }}</p>
   <p>{{ remess }}</p>
   <p>{{ mess.split('').reverse().join('') }}</p>
  </div>
  <Skript>
   var vm = neuer Vue({
    el: '#app',
    Daten:{
     Chaos: 'abcd'
    },
    berechnet: {
     remess:Funktion(){
      gib dies zurück.mess.split('').reverse().join('')
     }
    }
   })
  </Skript>
 </body>
</html>

2.Methoden

computed erfolgt auf Basis des Abhängigkeitscache und wird nur dann neu bewertet, wenn sich die relevanten Abhängigkeiten ändern. Bei methods wird die Funktion beim erneuten Rendern immer erneut aufgerufen.

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <Titel></Titel>
  <script src="./js/vue.js"></script>
 </Kopf>
 <Text>
  <div id="app">
   <input v-model="mess" />
   <p>{{ Chaos }}</p>
   <p>{{ remess }}</p>
   <p>{{ remess2() }}</p>
  </div>
  <Skript>
   var vm = neuer Vue({
    el: '#app',
    Daten:{
     Chaos: 'abcd'
    },
    berechnet: {
     remess:Funktion(){
      gib dies zurück.mess.split('').reverse().join('')
     }
    },
    Methoden: {
     remess2:Funktion(){
      gib dies zurück.mess.split('').reverse().join('')
     }
    }
   })
  </Skript>
 </body>
</html>

3. Setter

Wenn die Seite bestimmte Daten erhält, sucht sie zuerst in den Daten. Wenn sie die Daten nicht finden kann, sucht sie im berechneten Attribut. Beim Abrufen von Daten im berechneten Attribut wird die Get-Methode automatisch ausgeführt, und es wird auch eine Set-Methode bereitgestellt. computed Eigenschaften haben standardmäßig nur getter , Sie können bei Bedarf aber auch einen Setter angeben.

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <Titel></Titel>
  <script src="./js/vue.js"></script>
 </Kopf>
 <Text>
  <div id="app">
   <p>{{ Website }}</p>
  </div>
  <Skript>
   var vm = neuer Vue({
    el: '#app',
    Daten: {
     Name: 'xiaowang',
     Klasse: '01'
    },
    berechnet:{
     Website:{
      erhalten: Funktion(){
       gib diesen.Namen zurück+' '+diesen.cls
      },
      set: Funktion(Wert){
       Variablennamen = Wert.split('|')
       dieser.name = Namen[0]
       this.cls = Namen[1]
      }
     }
    }
   })
   vm.site = "xiaowang|01";
   Dokument.schreiben('name:'+vm.name);
   dokument.schreiben('<br>');
   Dokument.schreiben('Klasse:'+vm.cls);
  </Skript>
 </body>
</html>

Dies ist das Ende dieses Artikels über Vue-Listening-Eigenschaften und berechnete Eigenschaften. Weitere relevante Inhalte zu Vue-Listening- und berechneten Eigenschaften finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Transkript der Implementierung berechneter Vue-Eigenschaften
  • 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
  • Berechnete Eigenschaften und Datenerfassungsmethoden in Vue
  • Kennen Sie die berechneten Eigenschaften von Vue?
  • Drei Implementierungsmethoden für den berechneten Eigenschaftsnamenfall von Vue

<<:  Geben Sie die Stildatei für die automatische Suchvorschlagsfunktion ein: suggestions.css

>>:  Einführung in den glibc-Upgradeprozess für Centos6.5

Artikel empfehlen

Detaillierte Erklärung zur Verwendung der Linux-Umleitung

Ich glaube, dass jeder manchmal Daten kopieren un...

Details zur Verwendung des Vue-Slots

Inhaltsverzeichnis 1. Warum Slots verwenden? 1.1 ...

W3C Tutorial (10): W3C XQuery Aktivitäten

XQuery ist eine Sprache zum Extrahieren von Daten...

HTML-Tutorial: Das Optgroup-Element verstehen

Wählen Sie die Kategorieauswahl. Nach Tests könne...

So verwenden Sie die Baidu Map API im Vue-Projekt

Inhaltsverzeichnis 1. Registrieren Sie ein Konto ...

So gehen Sie mit zu vielen Docker-Protokollen um, die dazu führen, dass die Festplatte voll wird

Ich habe einen Server, auf dem mehrere Docker-Con...

Node.js implementiert die Wiederaufnahme von Haltepunkten

Inhaltsverzeichnis Lösungsanalyse Scheibe Lebensl...

Vue erhält Token zur Implementierung des Beispielcodes für die Token-Anmeldung

Die Idee hinter der Verwendung eines Tokens zur L...

Die Scroll-Ansicht des WeChat-Applets realisiert die Verknüpfung nach links und rechts

In diesem Artikel wird der spezifische Code für d...

Detaillierte Erklärung des Unterschieds zwischen "/" und "~" in Linux

"/" ist das Stammverzeichnis und "...

Beispiel für einen SQL-Seriennummernerfassungscode

In diesem Artikel wird hauptsächlich das Beispiel...

Gemeinsame Überprüfung beider Vue-Felder zur Realisierung der Kennwortänderungsfunktion

Inhaltsverzeichnis 1. Einleitung 2. Implementieru...

Verwenden Sie href in HTML, um beim Klicken auf einen Link ein Dialogfeld zum Herunterladen von Dateien anzuzeigen.

Ich habe heute einen neuen Trick gelernt. Ich kann...

JavaScript zum Implementieren einer zufälligen Namensaufruf-Webseite

JavaScript schreibt eine zufällige Roll-Call-Webs...

Detaillierte Erläuterung zur Verwendung von Docker zum Erstellen einer einfachen Java-Entwicklungs- und Kompilierungsumgebung

Es gibt viele Versionen der Java-Sprache. Zusätzl...