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

Beschreibung der Grenzen und Bereiche zwischen MySQL

MySQL zwischen Grenzbereich Der Bereich zwischen ...

JavaScript-Objekte (Details)

Inhaltsverzeichnis JavaScript-Objekte 1. Definiti...

HTML-Tabellen-Tag-Tutorial (33): Attribut für vertikale Zellenausrichtung VALIGN

In vertikaler Richtung können Sie die Zellenausri...

Beispiel zum Aktivieren langsamer Abfragen in MySQL

Vorwort Das langsame Abfrageprotokoll ist eine se...

So verwenden Sie Binlog zur Datenwiederherstellung in MySQL

Vorwort Kürzlich wurden Daten online falsch bearb...

Verwendung des Docker-Systembefehlssatzes

Inhaltsverzeichnis Docker-System df Docker-System...

iFrame ist eine großartige Möglichkeit, es als Popup-Ebene zu verwenden, um den Hintergrund abzudecken

Ich habe kürzlich an einem Projekt gearbeitet – Bu...

Navicat importiert CSV-Daten in MySQL

In diesem Artikel erfahren Sie, wie Sie mit Navic...

Details der MySQL-Berechnungsfunktion

Inhaltsverzeichnis 2. Feldverkettung 2. Geben Sie...

Grundlegendes Tutorial zum WeChat-Miniprogramm: Verwendung von Echart

Vorwort Schauen wir uns zunächst den Endeffekt an...

So aktivieren oder deaktivieren Sie Linux-Dienste mit den Befehlen chkconfig und systemctl

Dies ist ein wichtiges (und wunderbares) Thema fü...

Analyse der Gründe, warum Vue3 Proxy zur Implementierung der Datenüberwachung verwendet

Vue-Datenbindungsprinzip in beide Richtungen, abe...

Beschreiben Sie kurz, wie Sie das Tomcat-Image installieren und das Webprojekt in Docker bereitstellen

1. Installieren Sie Tomcat 1. Suchen Sie das Tomc...

Detaillierte Einführung in das CSS-Prioritätswissen

Bevor wir über die CSS-Priorität sprechen, müssen...

CSS erzielt den „Bottom Absorption“-Effekt im Footer

Wir stoßen häufig auf dieses Problem: Wie kann ma...