Выражения в скобках

Между двойными скобками можно писать не только имя переменной. Vue принимает любое выражение JavaScript, то есть кусок кода, который даёт значение. Он вычисляет выражение и показывает результат:

<script setup>
const name = "Капучино";
const price = 3;
const menu = ["Эспрессо", "Капучино", "Зелёный чай"];
</script>

<template>
    <p>Две чашки: €{{ price * 2 }}</p>
    <p>{{ `${name}: €${price}` }}</p>
    <p>{{ name.toUpperCase() }}</p>
    <p>Напитков: {{ menu.length }}</p>
    <p>{{ menu.join(", ") }}</p>
</template>

Страница покажет:

Две чашки: €6
Капучино: €3
КАПУЧИНО
Напитков: 3
Эспрессо, Капучино, Зелёный чай

Здесь работает всё, что вы знаете с курса JavaScript: арифметика, шаблонные строки, методы строк, например toUpperCase() и trim(), методы массивов, например join() и includes(), и length. Скобки показывают результат выражения, а текст вокруг них остаётся как есть.

Так что второй абзац можно было бы записать и без шаблонной строки: {{ name }}: €{{ price }}. Используйте то, что читается лучше.

Пишите выражения короткими. Длинное вычисление делает шаблон трудночитаемым; в уроке «Вычисляемые значения и наблюдатели» вы узнаете, где такие вычисления должны жить.