Итоги

В этом уроке вы узнали, что:

• v-if="condition" ставит элемент на страницу, только пока условие истинно. v-else-if и v-else идут сразу после него, и Vue показывает только первый элемент, условие которого истинно. Каждый v-if начинает новую цепочку.
• v-show оставляет элемент на странице и только скрывает его с помощью display: none. Он нужен для того, что показывают и скрывают часто; в остальных случаях берите v-if.
• v-for="item in menu" создаёт элемент для каждого элемента массива. Ему нужен :key="item.id" — ключ, который остаётся при своём элементе, а не его позиция, которая меняется при удалении элементов.
• (item, index) in menu даёт и позицию, начиная с 0, а n in 5 считает от 1 до 5.
• <template> группирует элементы для v-if или v-for и сам на страницу не попадает.
• v-if и v-for никогда не ставят на один элемент: поставьте v-for на <template> вокруг него.
• Пустой список заслуживает сообщения: v-if="order.length === 0" на сообщении и v-else на списке.
• v-for может перебирать то, что возвращает функция, например itemsIn('tea'), которая фильтрует или сортирует. Сортируйте новый массив, а не само состояние.

В следующем уроке, «Мини-проект: Список вещей», вы соберёте вместе последние четыре урока в списке вещей для поездки в горы на выходные.

Но сначала немного практики: столики кафе, которые свободны или заняты.