So verwenden Sie dynamische Parameter und berechnete Eigenschaften in Vue

1. Dynamische Parameter

Ab 2.6.0 können Sie einen in eckige Klammern eingeschlossenen JavaScript-Ausdruck als Direktiveargument verwenden:

<a v-bind:[attributeName]="url"> …

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:

<a v-on:[eventName]="etwas tun"> …

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 Eigenschaften

Ausdrü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:

{{ message.split('').reverse().join('') }}

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>

Zusammenfassen

Dies 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:

Detaillierte Erklärung der berechneten Eigenschaften, der Überwachungseigenschaften und des Lebenszyklus in Vue.js
Einführung in berechnete Eigenschaften in Vue
Berechnete Eigenschaften und Datenerfassungsmethoden in Vue
Berechnete Eigenschaften und Überwachungseigenschaften in Vue
Vue-Berechnungseigenschaften und Funktionsauswahl

<<: Zusammenfassung der allgemeinen Quellkonfiguration von Spiegelbildern für Linux-Distributionen

>>: Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.25

So verwenden Sie dynamische Parameter und berechnete Eigenschaften in Vue

1. Dynamische Parameter

2. Berechnete Eigenschaften

Zusammenfassen

Detaillierte Einführungshinweise zu Vue

So fragen Sie die Schnittmenge von Zeiträumen in MySQL ab

Einführung in Container-Datenvolumes in Docker

Mit CSS3 erstellter Hintergrundverlaufsanimationseffekt

So verwenden Sie die Wurmreplikation in einer MySQL-Datentabelle

Fügen Sie beim Schreiben von HTML-Links immer Schrägstriche zu Unterordnern hinzu, um HTTP-Anfragen zu reduzieren

Probleme und Vorsichtsmaßnahmen beim Festlegen von maxPostSize für Tomcat

Installations-Tutorial für VMware Workstation 12 Pro Linux

MySQL-Abfrageanweisungsprozess und grundlegende Konzepte der EXPLAIN-Anweisung und deren Optimierung

Beispiel für das Erstellen eines virtuellen Hosts basierend auf dem Apache-Port

Artikel empfehlen

Detaillierte Erklärung des Vue-Mixins

Detaillierte Erklärung zur Verwendung der Stat-Funktion und des Stat-Befehls in Linux

Erläuterung der neuen Funktion von Hadoop 2.X, der Papierkorbfunktion

So finden und löschen Sie doppelte Zeilen in MySQL

So schreiben Sie hochwertigen JavaScript-Code

Detaillierte Beschreibung des Anwendungsszenarios für Javascript-Closure

Problem mit der Kompilierung des Nginx RTMP-Moduls in der Arm-Version

Detaillierte Erklärung des Whereis-Beispiels zum Suchen eines bestimmten Programms in Linux

Viewport-Parameter für mobile Browser (Web-Frontend-Design)

Detaillierte Erklärung der grundlegenden Verwendung des VUE Watch Listener

Slot-Anordnung und Nutzungsanalyse in Vue

Erläuterung der Anwendungsfälle von JavaScript setTimeout und setTimeinterval

Vue und React im Detail

So öffnen Sie externe Netzwerkzugriffsrechte für MySQL

Detaillierte Verwendung der MySQL-Funktionen row_number() und over()