Vue Academy · Урок

Условия и циклы

Выполняйте условный рендеринг с v-if и выводите списки с v-for

«Условия и циклы» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Условная отрисовка

Vue позволяет показывать или скрывать части интерфейса в зависимости от данных.

v-if условно отображает элемент
v-else-if и v-else объединяют условия в цепочку
v-show переключает видимость

v-if

Директива v-if отображает элемент только тогда, когда её выражение имеет истинное значение.

<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>

v-else-if и v-else

Объединяйте условия в цепочку с помощью v-else-if и v-else. Они должны непосредственно следовать за v-if.

<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>

v-show

v-show всегда отображает элемент, но переключает его CSS-свойство display.

<div v-show="isVisible">
  This div stays in the DOM,
  only display:none toggles.
</div>

v-if и v-show

Главное различие:

v-if полностью добавляет элемент в DOM или удаляет его из DOM
v-show оставляет элемент в DOM и лишь переключает свойство display

Используйте v-show для элементов, видимость которых часто переключается. Используйте v-if, если условие меняется редко или элемент требует больших ресурсов.

v-for для массивов

Директива v-for отображает список, перебирая массив.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->

v-for с индексом

С помощью v-for можно также получить индекс каждого элемента.

<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

Важность :key

При использовании v-for всегда указывайте уникальный :key.

Это помогает Vue отслеживать идентичность каждого узла
Обеспечивает эффективное и корректное обновление DOM
Используйте стабильный уникальный идентификатор, а не индекс массива, если порядок элементов может меняться

<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

Зачем нужен :key

Без подходящего ключа Vue может повторно использовать неправильные элементы при изменении списка.

Поля формы могут сохранить неправильное значение
Анимации могут работать некорректно
Состояние может привязаться к неправильной строке

Стабильный уникальный ключ предотвращает эти ошибки.

v-for для объектов

С помощью v-for можно перебирать значения свойств объекта, дополнительно получая ключ и индекс.

<li v-for="(value, key) in userProfile" :key="key">
  {{ key }}: {{ value }}
</li>

<!-- userProfile = { name: "Ada", age: 36 } -->

Сочетание v-for и условий

Чтобы отфильтровать список, предпочитайте вычисляемое свойство, а не размещайте v-if на том же элементе, что и v-for.

<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
  {{ task.title }}
</li>

<!-- activeTasks is a computed that
     returns only unfinished tasks -->

Быстрая проверка

Проверьте, насколько хорошо вы понимаете условия и циклы.

Итоги: условия и циклы

Вы изучили условную отрисовку и отображение списков:

v-if / v-else-if / v-else выполняют условную отрисовку
v-show переключает только отображение
v-for перебирает массивы и объекты
Всегда добавляйте уникальный :key
Фильтруйте списки с помощью вычисляемых свойств

Далее вы изучите привязку атрибутов и классов.

Часто задаваемые вопросы

Урок «Условия и циклы» бесплатный?

Да — полный текст урока «Условия и циклы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Условия и циклы»?

Выполняйте условный рендеринг с v-if и выводите списки с v-for Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Условия и циклы»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy