Výrazy v závorkách

Mezi dvojité závorky můžete napsat víc než jen název proměnné. Vue přijme jakýkoli výraz v JavaScriptu, tedy kus kódu, který dává hodnotu. Spočítá ho a ukáže výsledek:

<script setup>
const nazev = "Cappuccino";
const cena = 75;
const nabidka = ["Espresso", "Cappuccino", "Zelený čaj"];
</script>

<template>
    <p>Dva šálky: {{ cena * 2 }} Kč</p>
    <p>{{ `${nazev}: ${cena} Kč` }}</p>
    <p>{{ nazev.toUpperCase() }}</p>
    <p>Počet nápojů: {{ nabidka.length }}</p>
    <p>{{ nabidka.join(", ") }}</p>
</template>

Stránka ukáže:

Dva šálky: 150 Kč
Cappuccino: 75 Kč
CAPPUCCINO
Počet nápojů: 3
Espresso, Cappuccino, Zelený čaj

Funguje tu všechno, co znáte z kurzu JavaScriptu: počítání, šablonové řetězce, metody textu jako toUpperCase() a trim(), metody polí jako join() a includes() a také length. Závorky ukážou výsledek výrazu a text kolem nich zůstane, jak je.

Druhý odstavec proto jde napsat i bez šablonového řetězce, jako {{ nazev }}: {{ cena }} Kč. Použijte, co se vám čte líp.

Výrazy pište krátké. Dlouhý výpočet dělá šablonu nepřehlednou; kam takové výpočty patří, se dozvíte v lekci Vypočítané hodnoty a sledování.