Zusammenfassung der Verwendung von berechneten Vue-Eigenschaften und -Listenern

Zusammenfassung der Verwendung von berechneten Vue-Eigenschaften und -Listenern

1. Berechnete Eigenschaften und Listener

1.1 Berechnete Eigenschaften

<!DOCTYPE html>
<html>
  <Kopf>
    <meta charset="utf-8">   
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  </Kopf>
  <Text>
    <div id="app">
			<p>{{ Nachricht }}</p>
			<p>{{ umgekehrteNachricht }}</p>
    </div>
    <Skript>
      neuer Vue({
        el: '#app',
        Daten: {
					Nachricht: „Hallo“
        },
				berechnet: {					
					umgekehrteNachricht: Funktion () {
						gib diese.Nachricht.Split('').Reverse().Join('') zurück
					}
					/*
					// entspricht reversedMessage: {
						erhalten(){
							gib diese.Nachricht.Split('').Reverse().Join('') zurück
						}
					}
					*/
				}
      });
    </Skript>
  </body>
</html>

Erklärung: Wir haben die berechnete Eigenschaft reversedMessage in der berechneten Eigenschaft definiert. Die hier bereitgestellte Funktion wird als Getter-Funktion der berechneten Eigenschaft reversedMessage verwendet.

1.2 Setter

Berechnete Eigenschaften haben standardmäßig nur einen Getter, aber wir können einen Setter bereitstellen.

<!DOCTYPE html>
<html>
  <Kopf>
    <meta charset="utf-8">   
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  </Kopf>
  <Text>
    <div id="app">
			<p>{{ Nachricht }}</p>
			<p>{{ umgekehrteNachricht }}</p>
			<input type="text" v-model="umgekehrteNachricht" />
    </div>
    <Skript>
      neuer Vue({
        el: '#app',
        Daten: {
					Nachricht: „Hallo“
        },
				berechnet: {
					umgekehrteNachricht: {
						erhalten(){
							gib diese.Nachricht.Split('').Reverse().Join('') zurück
						},
						setze(Wert){
							diese.Nachricht = Wert.split('').reverse().join('')
						}
					}
				}
      });
    </Skript>
  </body>
</html>

1.3 Zwischenspeicherung

<!DOCTYPE html>
<html>
  <Kopf>
    <meta charset="utf-8">   
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  </Kopf>
  <Text>
    <div id="app">
			<p>{{ Nachricht }}</p>
			<p>{{ umgekehrteNachricht }}</p>
			<p>{{ umgekehrteNachricht1() }}</p>
    </div>
    <Skript>
      neuer Vue({
        el: '#app',
        Daten: {
					Nachricht: „Hallo“
        },
				Methoden: {
					umgekehrteNachricht1: Funktion(){
						gib diese.Nachricht.Split('').Reverse().Join('') zurück
					}
				},
				berechnet: {					
					umgekehrteNachricht: Funktion () {
						gib diese.Nachricht.Split('').Reverse().Join('') zurück
					}
				}
      });
    </Skript>
  </body>
</html>

Hinweis: Obwohl mit berechneten Eigenschaften und Methoden derselbe Effekt erzielt werden kann, werden berechnete Eigenschaften basierend auf ihren reaktiven Abhängigkeiten zwischengespeichert. Eine Neubewertung erfolgt nur dann, wenn sich die zugehörigen reaktiven Abhängigkeiten ändern.

1.4 Höreigenschaften

Sie können Datenänderungen über die Watch-Eigenschaft der Vue-Instanz überwachen.

<!DOCTYPE html>
<html>
  <Kopf>
    <meta charset="utf-8">   
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  </Kopf>
  <Text>
    <div id="app">
			<p>{{ Nachricht }}</p>
			<button @click="reverse=!reverse">Umkehren</button>
    </div>
    <Skript>
      neuer Vue({
        el: '#app',
        Daten: {
					Nachricht: 'Vue',
					umgekehrt: falsch
        },
				betrachten:
					// Nachricht: Funktion(neuerWert, alterWert){
					umgekehrt: Funktion(neuerWert){
						console.log(neuerWert)
						diese.Nachricht = diese.Nachricht.split('').reverse().join('')
					}
				},
      });
    </Skript>
  </body>
</html>

Denselben Effekt können wir über das Instanzattribut vm.$watch erzielen.

<!DOCTYPE html>
<html>
  <Kopf>
    <meta charset="utf-8">   
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  </Kopf>
  <Text>
    <div id="app">
			<p>{{ Nachricht }}</p>
			<button @click="reverse=!reverse">Umkehren</button>
    </div>
    <Skript>
      var vm = neuer Vue({
        el: '#app',
        Daten: {
					Nachricht: 'Vue',
					umgekehrt: falsch
        }
      });
			
			// vm.$watch('reverse', function (neuerWert, alterWert) {
			vm.$watch('reverse', Funktion (neuerWert) {
				console.log(neuerWert)
				diese.Nachricht = diese.Nachricht.split('').reverse().join('')
			});
    </Skript>
  </body>
</html>

Oben finden Sie den detaillierten Inhalt der Zusammenfassung der Verwendung von Vue-berechneten Eigenschaften und Listenern. Weitere Informationen zu Vue-berechneten Eigenschaften und Listenern finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung des Watch-Listener-Beispiels in vue3.0
  • So verwenden Sie Watch-Listener in Vue2 und Vue3
  • Grundlegende Anwendungsbeispiele für Listener in Vue
  • Lösen Sie das Problem von undefiniert, wenn Sie dies in Vue Listener Watch aufrufen
  • Vue-Lernhinweise: Berechnungseigenschaften und Listener-Nutzung
  • Detaillierte Erläuterung des Vue 2.0-Listener-Watch-Attributcodes
  • Vue Grundlagen Listener Detaillierte Erklärung

<<:  So verwalten Sie Docker über die Benutzeroberfläche

>>:  MySQL implementiert eine Funktion ähnlich der MySQL-Methode oder gespeicherten Prozedur connect_by_isleaf

Artikel empfehlen

Detaillierte Untersuchung der Verwendung der Positionierung in CSS (Zusammenfassung)

Einführung in die Positionierung in CSS position ...

SSM implementiert die Chiffretext-Anmeldefunktion für das Kennwort des MySQL-Datenbankkontos

Einführung Unser Unternehmen ist an der Forschung...

So verbergen Sie die Versionsnummer in Nginx

Nginx verbirgt die Versionsnummer In einer Produk...

js kehrt zur vorherigen Seite zurück und aktualisiert den Code

1. Javascript kehrt zur vorherigen Seite zurück hi...

Detaillierte Erklärung zu Javascript-Dateien und Blobs

Inhaltsverzeichnis Datei() Grammatik Parameter Be...

Detaillierte Erklärung zur Verwendung von Teleport in Vue3

Inhaltsverzeichnis Zweck des Teleports So funktio...

Serviceverwaltung der Quellpaketinstallation unter Linux

Inhaltsverzeichnis 1. Startverwaltung des Quellpa...

Verwendung von Kubernetes YAML-Dateien

Inhaltsverzeichnis 01 Einführung in YAML-Dateien ...

Verwendung des Linux-Befehls ifconfig

1. Befehlseinführung Der Befehl ifconfig (Netzwer...

Detaillierte Erklärung der dynamischen Komponenten von vue.js

:ist eine dynamische Komponente Verwenden Sie v-b...

Spezifische Verwendung von Docker Anonymous Mount und Named Mount

Inhaltsverzeichnis Datenvolumen Anonyme und benan...

Beheben Sie das Problem, dass die Docker-Installation abgeschlossen und gemeldet wird: bridge-nf-call-iptables ist deaktiviert

Nachdem die Docker-Installation auf der CentOS-Ma...

Verwenden Sie Tomcat, um die gemeinsam genutzte Bibliothek so einzurichten, dass sie dasselbe JAR teilt.

Da immer mehr Projekte bereitgestellt werden, wer...

So implementieren Sie Nginx Reverse Proxy und Load Balancing (basierend auf Linux)

Probieren wir hier den Reverse-Proxy von Nginx au...

Allgemeine Befehle zum Bereitstellen von InfluxDB und Mongo mit Docker

Bereitstellen einer Datenbank basierend auf Docke...