So verwenden Sie dynamische Parameter und berechnete Eigenschaften in Vue
1. Dynamische ParameterAb 2.6.0 können Sie einen in eckige Klammern eingeschlossenen JavaScript-Ausdruck als Direktiveargument verwenden:
Hier wird attributeName dynamisch als JavaScript-Ausdruck ausgewertet und der resultierende Wert als endgültiger Parameter verwendet. Wenn Ihre Vue-Instanz beispielsweise eine Dateneigenschaft „attributeName“ mit dem Wert „href“ hat, dann ist diese Bindung gleichwertig mit „v-bind:href“. Ebenso können Sie dynamische Parameter verwenden, um eine Handler-Funktion an einen dynamischen Ereignisnamen zu binden:
Wenn in diesem Beispiel der Wert von eventName „focus“ ist, ist v-on:[eventName] gleichbedeutend mit v-on:focus. Beispiel:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Dynamische Parameter</title>
<script src="vue.js"></script>
</Kopf>
<Text>
<div id='app7'>
<span v-on:[event_name]='tu etwas'>{{msg}}</span>
</div>
</body>
<Skript>
var vm = neuer Vue({
el:"#app7",
Daten:{
Nachricht:100,
event_name:'klicken'
},
Methoden:{
machwas:funktion(){
diese.msg = diese.msg + 1
}
}
})
</Skript>
</html>
2. Berechnete EigenschaftenAusdrücke in Vorlagen sind sehr praktisch, sie sind jedoch in erster Linie für einfache Berechnungen gedacht. Wenn Sie zu viel Logik in eine Vorlage packen, kann diese unhandlich und schwer zu pflegen werden. Zum Beispiel:
An diesem Punkt ist die Vorlage nicht mehr nur eine einfache deklarative Logik. Man muss eine Weile hinschauen, bevor man erkennt, dass wir hier die umgekehrte Zeichenfolge der Variablen „Nachricht“ anzeigen möchten. Noch schwieriger wird die Handhabung, wenn Sie diese umgedrehte Zeichenfolge an mehreren Stellen in Ihrer Vorlage einfügen möchten. Sie sollten daher für jede komplexe Logik berechnete Eigenschaften verwenden.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Berechnete Eigenschaften</title>
<script src="vue.js"></script>
</Kopf>
<Text>
<div id = 'App'>{{Wert_Hinzufügen}}</div>
</body>
<Skript>
var vm = neuer Vue({
el:"#app",
Daten:{
Wert: 100
},
berechnet: { //Ähnlich wie Methoden value_add:function(){
gib diesen Wert + 100 zurück
}
}
})
</Skript>
</html>
ZusammenfassenDies ist das Ende dieses Artikels über die Verwendung dynamischer Parameter und berechneter Eigenschaften in Vue. Weitere relevante Inhalte zu dynamischen Parametern und berechneten Eigenschaften von Vue finden Sie in früheren Artikeln auf 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:
|
<<: Zusammenfassung der allgemeinen Quellkonfiguration von Spiegelbildern für Linux-Distributionen
>>: Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.25
Artikel empfehlen
So gehen Sie mit dem Verlust von Parametern um, wenn Sie die Seite aktualisieren und Parameter an den Vue-Router übergeben
Inhaltsverzeichnis Überblick Methode 1: Parameter...
Detaillierte Erläuterung der Ein- und Ausgabeverwaltung des Linux-Systems und der allgemeinen Funktionen von vim
####Verwaltung der Ein- und Ausgaben im System###...
Detaillierte Erklärung, wie zwei Node.js-Prozesse kommunizieren
Inhaltsverzeichnis Vorwort Kommunikation zwischen...
Beispiel für eine Domänennamenüberprüfungsmethode für Betrieb und Wartung von Nginx
Beim Konfigurieren des Domänennamens der Schnitts...
Detaillierte Erklärung der Rolle des neuen Operators in Js
Vorwort Js ist heutzutage die am häufigsten verwe...
HTML verwendet Formular-Tags, um den Beispielcode der Registrierungsseite zu implementieren
Fallbeschreibung: - Verwenden Sie Tabellen, um Se...
Implementierung der Nginx-Lastverteilung/SSL-Konfiguration
Was ist Lastenausgleich? Wenn ein Domänenname auf...
Einführung in Linux und die am häufigsten verwendeten Befehle (leicht zu erlernen, kann aber mehr als 95 % der Probleme lösen)
Linux ist derzeit das am weitesten verbreitete Se...
Verwendung und Beschreibung des HTML-Tags tbody
Das Tbody-Element sollte in Verbindung mit den Ele...
Detaillierte Erklärung der Verwendung des Linux-Befehls lsof
lsof (List Open Files) ist ein Tool zum Anzeigen ...
CentOS verwendet expect, um Skripte und Befehle remote in Stapeln auszuführen
Manchmal müssen wir Server stapelweise bedienen, ...
20 CSS-Codierungstipps für mehr Effizienz (sortiert)
In diesem Artikel möchten wir eine Sammlung von 2...
Möglicherweise benötigen Sie einen digitalen Großbild-Scrolling-Effekt wie diesen
Der digitale Scrolleffekt auf großen Bildschirmen...
So installieren Sie Postgres 12 + pgadmin im lokalen Docker (unterstützt Apple M1)
Inhaltsverzeichnis einführen Unterstützt Intel-CP...
Lösen Sie das Problem, dass der anonyme Upload und Download von Linux-FTP automatisch startet
Wenn Sie den FTP-Server häufig in Ihrem Studium o...