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

Detaillierte Erklärung der CSS-Textdekoration Textdekoration & Texthervorhebung

Zusammenfassung der Verwendung von berechneten Vue-Eigenschaften und -Listenern

1. Berechnete Eigenschaften und Listener

1.1 Berechnete Eigenschaften

1.2 Setter

1.3 Zwischenspeicherung

1.4 Höreigenschaften

Detaillierte Erklärung der CSS-Textdekoration Textdekoration & Texthervorhebung

Verwendung von MySQL-Fuzzy-Abfragen (regulär, Platzhalter, integrierte Funktion)

Mehrere gängige Methoden zum Festlegen der Ankerpositionierung in HTML

Vorschläge zur Optimierung der Webseiten-Kopfzeile

Front-End-JavaScript-Funktionsprinzip

Vue implementiert die Anmeldung per Mobiltelefon-Bestätigungscode

HTML-Endtag-Problem und W3C-Standard

So kopieren Sie eine MySQL-Tabelle

Kapseln Sie eine einfachste ErrorBoundary-Komponente zur Behandlung von React-Ausnahmen

MySQL-Datenbank-Entwicklungsspezifikationen [empfohlen]

Artikel empfehlen

Installieren Sie den NVIDIA-Grafiktreiber unter Ubuntu (einfache Installationsmethode).

Vue und React im Detail

Detaillierte Schritte zum Einrichten und Konfigurieren von NIS-Domänendiensten auf Centos8

Vuex kombiniert Sitzungsspeicherdaten, um das Problem des Datenverlusts beim Aktualisieren der Seite zu lösen

Best Practices für die Bereitstellung des ELK7.3.0-Protokollsammlungsdienstes mit Docker

Docker stellt nginx bereit und mountet Ordner und Dateioperationen

So implementieren Sie das Rasterlayout mit Intervallen perfekt auf der Seite

So testen Sie die Netzwerkgeschwindigkeit mit JavaScript

Windows Server 2016 – Kurzanleitung zur Bereitstellung von Remotedesktopdiensten

Mehrere häufig verwendete Methoden zum Zentrieren von CSS-Boxen (Zusammenfassung)

Vollständige MySQL-Collapse-Abfrage, reguläre Übereinstimmung, ausführliche Erklärung

Einführung in die MySQL-Methode zum Löschen von Tabellendaten mit Fremdschlüsseleinschränkungen

Eine kurze Einführung in die MySQL-Speicher-Engine

Implementierungsschritte der objektorientierten Kapselung von js in einer kaskadierenden Dropdown-Menüliste

Verwenden Sie Nginx, um einen Streaming-Media-Server zu erstellen und die Live-Übertragungsfunktion zu realisieren