Der Bedingungsoperator

Oft soll die Seite je nach Daten eines von zwei Dingen zeigen: „geöffnet“ oder „geschlossen“, einen Preis oder „ausverkauft“. Dafür hat JavaScript den Bedingungsoperator, der mit einem Fragezeichen und einem Doppelpunkt geschrieben wird:

bedingung ? wertWennWahr : wertWennFalsch

JavaScript prüft die Bedingung. Ist sie wahr, ergibt der ganze Ausdruck den Wert nach dem ?; ist sie falsch, den Wert nach dem :. In einer Vorlage:

<script setup>
const geoeffnet = true;
const name = "Karottenkuchen";
const vegan = true;
</script>

<template>
    <p>Wir sind {{ geoeffnet ? "geöffnet" : "geschlossen" }}.</p>
    <p>{{ name }}{{ vegan ? " (vegan)" : "" }}</p>
</template>

Die Seite zeigt Wir sind geöffnet. und Karottenkuchen (vegan). Mit const geoeffnet = false; zeigt sie Wir sind geschlossen., und mit const vegan = false; nur Karottenkuchen. Der leere Text "" zeigt nichts an, der zweite Absatz fügt (vegan) also nur hinzu, wenn vegan wahr ist.

Die Bedingung kann alles sein, was du in ein if schreiben würdest: preis > 3, anzahl === 1, geoeffnet && !voll. Und der Operator funktioniert überall in JavaScript, nicht nur in Vorlagen. Er ist wie ein kurzes if/else, das einen Wert ergibt:

const wort = tassen === 1 ? "Tasse" : "Tassen";

Warum nicht gleich ein if in den Klammern? Weil {{ }} nur Ausdrücke akzeptiert, also Code, der einen Wert ergibt. if, for und const sind Anweisungen: Sie tun etwas, ergeben aber keinen Wert. Mit {{ if (geoeffnet) { "geöffnet" } }} läuft die App nicht, und die Meldung unter der Vorschau lautet Error parsing JavaScript expression: Unexpected token. Um ein ganzes Element nur zu zeigen, wenn eine Bedingung wahr ist, gibt es in Vorlagen v-if, das du in der Lektion Bedingungen und Listen lernst.

Typische Fehler:

• Ohne den Teil nach dem :, wie in {{ geoeffnet ? "geöffnet" }}, läuft die App nicht: Der Bedingungsoperator braucht immer beide Werte. Soll einer davon nichts sein, nimm "".