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
CSS, um den Übergangsanimationseffekt des Bildes zu erzielen, wenn die Maus darauf platziert wird
Code <div Klasse="Test"> <div&...
Warum sollten Sie mit der add_header-Direktive von Nginx vorsichtig sein?
Vorwort Wie wir alle wissen, legt die Nginx-Konfi...
Schritte zum Erstellen der MHA-Architekturbereitstellung in MySQL
Inhaltsverzeichnis MAH 1. Einführung in die MAH-A...
Mehrere Methoden zum Ausführen von SQL-Dateien unter der MySQL-Befehlszeile
Inhaltsverzeichnis Die erste Methode: Wenn die My...
Eine kurze Diskussion über die binäre Familie von JS
Inhaltsverzeichnis Überblick Klecks Blob in Aktio...
SVG+CSS3 zum Erzielen eines dynamischen Welleneffekts
Eine Vektorwelle <svg viewBox="0 0 560 20...
Eine kurze Analyse der LRU-verknüpften Liste von MySQL
1. Beschreiben Sie kurz die traditionelle LRU-ver...
Beispiel für die Verwendung von UserMap in IMG
usemap ist ein Attribut des <img>-Tags, das ...
Teilen Sie 12 häufig verwendete Loader in Webpack (Zusammenfassung)
Inhaltsverzeichnis Vorwort Stillader CSS-Lader Sa...
Sechs Methoden zur Nginx-Optimierung
1. Optimieren Sie die Nginx-Parallelität [root@pr...
So implementieren Sie eine einzelne Dateikomponente in JS
Inhaltsverzeichnis Überblick Einzelne Dateikompon...
Das WeChat-Applet implementiert eine einfache handschriftliche Signaturkomponente
Inhaltsverzeichnis Hintergrund: brauchen: Wirkung...
Eine kurze Analyse des Problems der Mysql 8.0-Version, das getTables dazu veranlasst, alle Datenbanktabellen zurückzugeben
Vorwort Dieser Artikel stellt hauptsächlich den r...
Eine kurze Diskussion über das Problem des vergessenen MySQL-Passworts und des Anmeldefehlers
Wenn Sie Ihr MySQL-Anmeldekennwort vergessen, ist...
Abkürzungszeichen und Akronymzeichen
Die Tags <abbr> und <acronym> stellen ...