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

So konfigurieren Sie die Basic Auth-Anmeldeauthentifizierung in Nginx

Manchmal erstellen wir einen Dateiserver über ngi...

Fehlereinfügungsanalyse der Funktion „updatexml()“ von MySQL

Verstehen Sie zunächst die Funktion updatexml() U...

Master-Slave-Synchronisationskonfiguration der Mysql-Datenbank

Inhaltsverzeichnis Mysql Master-Slave-Synchronisi...

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

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

Zusammenfassung der Vue-Datenreaktionsfähigkeit

Bevor wir über die Datenreaktivität sprechen, müs...

So verwenden Sie async und await richtig in JS-Schleifen

Inhaltsverzeichnis Übersicht (Loop-Modus – Allgem...

Lösung für das Problem, dass der obere Rand des untergeordneten Elements dazu führt, dass sich das übergeordnete Element verschiebt

Problembeschreibung Als ich heute den Seitenstil ...

Erstellen Sie ein Docker-Image mit Dockerfile

Inhaltsverzeichnis Erstellen Sie ein Docker-Image...

Detaillierte Erklärung der MySQL InnoDB-Indexerweiterung

Indexerweiterung: InnoDB erweitert automatisch je...

Beispielcode zur Implementierung von Neon-Button-Animationseffekten mit CSS3.0

Heute zeige ich Ihnen einen Neon-Button-Animation...

Wir treiben IE6 alleine in den Untergang

Tatsächlich fragen wir uns jeden Tag, wann IE6 wi...

Detaillierte Analyse von Javascript-Datenproxys und Ereignissen

Inhaltsverzeichnis Datenbroker und Events Überprü...

So analysieren Sie die Attributschnittstelle zum Hinzufügen eines Dateisystems unter Linux oder Android

Der Erste: 1. Fügen Sie wichtige Headerdateien hi...

Hinweise zur Konfiguration mehrerer Proxys mithilfe von Vue-Projekten

Im Entwicklungsprozess eines Vue-Projekts konfigu...

Ein Vergleich zwischen dem href-Attribut und dem onclick-Ereignis des a-Tags

Lassen Sie uns zunächst über die Ausführungsreihe...