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

Lösen Sie das Problem des MySql8.0-Prüfungsfehlers der Transaktionsisolationsebene

Inhaltsverzeichnis MySql8.0 Fehler bei der Transa...

Detaillierte Erklärung, wie Tomcat die Servlet-Initialisierung aus der Quellcodeanalyse aufruft

Inhaltsverzeichnis Einführung 1. Code zum Starten...

React-Tipps zeigen Ihnen, wie Sie Probleme mit Hook-Abhängigkeiten beseitigen

Ein sehr häufiges Szenario in react -Projekten: c...

JavaScript-Entwurfsmuster – Muster der Verantwortungskette

Inhaltsverzeichnis Überblick Code-Implementierung...

Docker verpackt das lokale Image und stellt es auf anderen Maschinen wieder her

1. Verwenden Sie Docker-Images, um alle Image-Dat...

Dieser Artikel hilft Ihnen, den Quellcode von PReact10.5.13 zu verstehen

Inhaltsverzeichnis render.js-Teil create-context....

Lösen Sie das Problem der Randzusammenführung

1. Die Ränder von Geschwisterelementen zusammenfü...

Langer HTML-Text wird automatisch abgeschnitten, wenn er die Tag-Breite überschreitet

Wenn wir langen Text anzeigen, müssen wir auf der ...

Auszeichnungssprache - Titel

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

JS implementiert WeChats "Shit Bombing"-Funktion

Hallo zusammen, ich bin Qiufeng. Vor Kurzem hat W...

Detaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten

In Projekten kommt es häufig vor, dass eine Liste...

Beispielcode für den Anzeigeeffekt zum Schütteln und Vergrößern von JS-Albumbildern

Im vorherigen Artikel wurde erläutert, wie Sie mi...

Der Unterschied und die Verwendung von json.stringify() und json.parse()

1. Unterschiede zwischen JSON.stringify() und JSO...

Beispiele für MySQL-Batch-Hinzufügungs- und Speichermethoden

Beim Anmelden am Stresstest sind viele verschiede...

Verwendung von MySQL DDL-Anweisungen

Vorwort Die Sprachklassifikation von SQL umfasst ...