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

Webinterview: Der Unterschied zwischen MVC und MVVM und warum Vue nicht vollständig mit MVVM kompatibel ist

Inhaltsverzeichnis Unterschied zwischen MVC und M...

Implementierung von React Routing Guard (Routing-Interception)

React unterscheidet sich von Vue. Es implementier...

So setzen Sie das MySQL-Root-Passwort zurück

Inhaltsverzeichnis 1. Ich habe das Root-Passwort ...

Einführung in die Verwendung von HTML-Bereichsbild-Hotspots mit einer Liste zugehöriger Eigenschaften

Der <area>-Tag wird vor allem in Imagemaps ...

Lösung für das Problem, dass der Rahmenstil des Tags <td></td> im Browser nicht angezeigt werden kann

Frage: In einigen Browsern, wie zum Beispiel im K...

So verwenden Sie Filter zur Implementierung der Überwachung in Zabbix

Als ich kürzlich an Überwachungsgeräten arbeitete...

Detaillierte Erklärung der Lösung für HTML-Layout mit festen linken und rechten Breiten und adaptiver Mitte

In diesem Artikel wird eine detaillierte Erläuter...

Diagramm des Tutorials zur schnellen Installation und Konfiguration des Linux-Systems MySQL8.0.19

Inhaltsverzeichnis 1. Umgebung Einführung 2. Inst...

Verwenden Sie Nicht-Root-Benutzer, um Skriptvorgänge in Docker-Containern auszuführen

Nachdem die Anwendung in einen Container verpackt...

Detaillierte Erläuterung der Docker-Container-Lebenszyklusarchitektur und der Unterschiede zwischen dieser und VM

Container-Lebenszyklus Der Lebenszyklus einer Con...

Ein verbessertes Screenshot- und Freigabetool für Linux: ScreenCloud

ScreenCloud ist eine tolle kleine App, von der Si...

So verwenden Sie HTML-Tabellen (um den visuellen Effekt einer Webseite anzuzeigen)

Wir wissen, dass wir beim Verwenden von HTML im N...

Eine kurze Diskussion darüber, ob zu viele MySQL-Datenabfragen OOM verursachen

Inhaltsverzeichnis Auswirkungen eines vollständig...

Zusammenfassung häufig verwendeter SQL-Operationen in MySQL-Tabellen

1. Sehen Sie sich die Feldtypen in der Tabelle an...

Prinzip des Linux-Nohup-Befehls und Beispielanalyse

nohup-Befehl Bei der Verwendung von Unix/Linux mö...