Zusammenfassung der Verwendung von berechneten Vue-Eigenschaften und -Listenern
1. Berechnete Eigenschaften und Listener1.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 SetterBerechnete 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öreigenschaftenSie 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:
|
<<: So verwalten Sie Docker über die Benutzeroberfläche
Artikel empfehlen
Verschaffen Sie sich ein umfassendes Verständnis des Prototypobjekts in JavaScript
Inhaltsverzeichnis 1. Was ist ein Prototyp? 1.1 F...
5 Tipps zum Schutz Ihres MySQL Data Warehouse
Durch die Aggregierung von Daten aus verschiedene...
Cache von JS- und CSS-Dateien in HTML-Seiten automatisch leeren (Versionsnummern automatisch hinzufügen)
Bei der Entwicklung von Webprojekten verweisen wi...
Das Laufschriftelement implementiert Effekte wie scrollende Schriften und Bilder
Mit dem Laufschriftelement können Sie einfache Gle...
Detaillierte Erklärung des Loop-Formularelementbeispiels in Vue
Manchmal stoßen wir auf eine solche Anforderung, ...
JS-Prinzip der asynchronen Ausführung und Rückrufdetails
1. JS-Prinzip der asynchronen Ausführung Wir wiss...
So verwenden Sie Port 80 in Tomcat unter Linux
Anwendungsszenario In vielen Fällen installieren ...
Implementierung der automatischen Vervollständigung von Docker-Befehlen
Vorwort Ich weiß nicht, wie lange dieser Freund D...
HTML-Grundlagen: HTML-Inhaltsdetails
Beginnen wir mit dem Körper: Wenn Sie eine Webseit...
Beispiel für die Verwendung von Docker Swarm zum Erstellen eines verteilten Crawler-Clusters
Während des Crawler-Entwicklungsprozesses sind Si...
Detaillierte Erklärung der grundlegenden Verwendung des SSH-Befehls ssh-keygen
Die SSH-Public-Key-Authentifizierung ist eine der...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.23
Dieser Artikel zeichnet den detaillierten Install...
Grundlegende Fähigkeiten zum Entwerfen von Web-Frontend-Schnittstellen
[Erforderlich] Benutzeroberfläche PhotoShop/Feuer...
WeChat-Applet + ECharts zur Realisierung eines dynamischen Aktualisierungsprozesses
Vorwort Kürzlich stieß ich auf eine Anforderung, ...
JavaScript-Lösung für die Setinterval-Verzögerung um eine Sekunde
Bei Verwendung von setinterval wird festgestellt,...