Ausdrücke in Klammern

Zwischen den doppelten geschweiften Klammern kannst du mehr als nur den Namen einer Variablen schreiben. Vue akzeptiert jeden JavaScript-Ausdruck, also ein Stück Code, das einen Wert ergibt. Es berechnet den Ausdruck und zeigt das Ergebnis an:

<script setup>
const name = "Cappuccino";
const preis = 3;
const menue = ["Espresso", "Cappuccino", "Grüner Tee"];
</script>

<template>
    <p>Zwei Tassen: {{ preis * 2 }} €</p>
    <p>{{ `${name}: ${preis} €` }}</p>
    <p>{{ name.toUpperCase() }}</p>
    <p>Getränke: {{ menue.length }}</p>
    <p>{{ menue.join(", ") }}</p>
</template>

Die Seite zeigt:

Zwei Tassen: 6 €
Cappuccino: 3 €
CAPPUCCINO
Getränke: 3
Espresso, Cappuccino, Grüner Tee

Alles, was du aus dem JavaScript-Kurs kennst, funktioniert hier: Rechnen, Template-Literale, die Methoden von Zeichenketten wie toUpperCase() und trim(), die Methoden von Arrays wie join() und includes() sowie length. Die Klammern zeigen das Ergebnis des Ausdrucks, und der Text um sie herum bleibt, wie er ist.

Den zweiten Absatz könntest du also auch ohne Template-Literal schreiben, als {{ name }}: {{ preis }} €. Nimm, was sich besser liest.

Halte die Ausdrücke kurz. Eine lange Berechnung macht die Vorlage schwer lesbar; in der Lektion Berechnete Werte und Watcher lernst du, wohin solche Berechnungen gehören.