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

Detaillierte Analyse der Übereinstimmungsregeln bei der Verarbeitung von Anfragen durch Nginx

So verwenden Sie dynamische Parameter und berechnete Eigenschaften in Vue

1. Dynamische Parameter

2. Berechnete Eigenschaften

Zusammenfassen

Detaillierte Analyse der Übereinstimmungsregeln bei der Verarbeitung von Anfragen durch Nginx

Was ist ein MySQL-Index? Fragen Sie, wenn Sie es nicht verstehen

CSS3 implementiert den Beispielcode der NES-Spielekonsole

Schritte zur Installation von cuda10.1 unter Ubuntu 20.04 (grafisches Tutorial)

Beispiele für die Verwendung der MySQL-EXPLAIN-Anweisung

Detailliertes Tutorial zur Installation von MySQL 5.7.18 unter Linux (CentOS 7) mit YUM

Einige CSS-Fragen, die Ihnen während eines Vorstellungsgesprächs gestellt werden könnten

Lösung für die falsche Ausrichtung des Eingabecursors in Chrome, Firefox und IE

So stellen Sie einzelne Tabellendaten mithilfe der vollständigen MySQL-Datenbanksicherungsdaten wieder her

JavaScript zur Nachahmung der Registrierungs- und Anmeldefunktion der offiziellen Xiaomi-Website

Artikel empfehlen

Eine detaillierte Einführung in Linux-Dateiberechtigungen

Verwendung regulärer Ausdrücke in CSS-Selektoren

Lösung für die Ineffektivität der flexiblen Layoutbreite in CSS3

So erstellen Sie LVM für das XFS-Dateisystem in Ubuntu

Probleme mit Sperren in MySQL

Lösung für die in Firefox oder IE nicht ermittelte Spannweite

Detaillierte Erläuterung der allgemeinen Schritte zur SQL-Anweisungsoptimierung

Implementierung von dynamischem REM für mobiles Layout

MySql 8.0.11 Installations- und Konfigurationstutorial

Implementierung eines MySQL-Gemeinschaftsindex (zusammengesetzter Index)

Vue implementiert den Anwesenheitskalender von DingTalk

Implementierung der Docker-Compose-Bereitstellung des ZK+Kafka+Storm-Clusters

React implementiert das Hinzufügen, Löschen, Ändern und Abfragen von Todolists

Was ist HTML?

Konfigurationscodebeispiel für Nginx-Forward- und Reverse-Proxy sowie Lastausgleichsfunktionen