Podmíněný operátor

Stránka má často ukázat jednu ze dvou věcí podle toho, jaká jsou data: „otevřeno“, nebo „zavřeno“, cenu, nebo „vyprodáno“. JavaScript na to má podmíněný operátor, který se píše s otazníkem a dvojtečkou:

podminka ? hodnotaKdyzPlati : hodnotaKdyzNeplati

JavaScript vyhodnotí podmínku. Když platí, je výsledkem celého výrazu hodnota za ?, když neplatí, hodnota za :. V šabloně:

<script setup>
const otevreno = true;
const nazev = "Mrkvový dort";
const vegansky = true;
</script>

<template>
    <p>Máme {{ otevreno ? "otevřeno" : "zavřeno" }}.</p>
    <p>{{ nazev }}{{ vegansky ? " (veganský)" : "" }}</p>
</template>

Stránka ukáže Máme otevřeno. a Mrkvový dort (veganský). S const otevreno = false; ukáže Máme zavřeno. a s const vegansky = false; jen Mrkvový dort. Prázdný text "" neukáže nic, takže druhý odstavec přidá (veganský), jen když vegansky platí.

Podmínka může být cokoli, co byste napsali do if: cena > 80, pocet === 1, otevreno && !plno. A operátor funguje kdekoli v JavaScriptu, nejen v šablonách. Je to jako krátké if/else, které dává hodnotu:

const popis = cena > 80 ? "dražší" : "levnější";

Proč ne if rovnou v závorkách? Protože {{ }} přijímá jen výrazy, kód, který dává hodnotu. if, for nebo const jsou příkazy: něco dělají, ale žádnou hodnotu nedávají. S {{ if (otevreno) { "otevřeno" } }} aplikace nepoběží a zpráva pod náhledem bude Error parsing JavaScript expression: Unexpected token (chyba při čtení výrazu: nečekaný symbol). Aby se celý prvek ukázal, jen když podmínka platí, mají šablony v-if, který se naučíte v lekci Podmínky a seznamy.

Typické chyby:

• Bez části za :, třeba {{ otevreno ? "otevřeno" }}, aplikace nepoběží: podmíněný operátor potřebuje vždycky obě hodnoty. Když jedna z nich má být „nic“, použijte "".