Директивы: v-if, v-for, v-bind и v-on
Условно отображайте элементы с v-if и v-show, выполняйте циклы с v-for, динамически связывайте атрибуты через v-bind и прослушивайте события DOM с помощью v-on.
«Директивы: v-if, v-for, v-bind и v-on» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое директивы Vue
Директивы — это специальные атрибуты с префиксом v-, которые указывают Vue выполнить действие над элементом DOM. Они вычисляются как выражения JavaScript и реагируют на изменения реактивных данных.
v-if, v-else-if, v-else
v-if условно отображает элемент на основе истинного выражения. Если выражение ложно, элемент полностью удаляется из DOM. v-else задаёт запасной вариант.
<div v-if="isLoggedIn">
<UserDashboard />
</div>
<div v-else-if="isLoading">
<Spinner />
</div>
<div v-else>
<LoginForm />
</div>v-show — переключение видимости
v-show переключает CSS-свойство display: none, не добавляя элемент в DOM и не удаляя его оттуда. Используйте v-show, если видимость элемента меняется часто, и v-if, если условие изменяется редко.
<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>
<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>v-for — отображение списков
v-for="item in items" отображает элемент для каждого элемента списка. Всегда указывайте :key для стабильного обновления.
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} — {{ user.email }}
</li>
</ul>
<!-- With index: -->
<li v-for="(item, index) in items" :key="item.id">
{{ index + 1 }}. {{ item.title }}
</li>v-for с объектом
Перебирайте значения объекта или пары «ключ — значение».
<dl>
<template v-for="(value, key) in user" :key="key">
<dt>{{ key }}</dt>
<dd>{{ value }}</dd>
</template>
</dl>v-bind — связывание атрибутов
v-bind:attr или сокращённая запись :attr динамически связывает атрибут HTML с реактивным значением.
<img :src="user.avatar" :alt="user.name">
<a :href="getLink(post.id)">{{ post.title }}</a>
<button :disabled="isLoading" :class="{ active: isActive }">Save</button>Синтаксис объекта в v-bind
Связывайте несколько атрибутов одновременно с помощью объекта.
<input v-bind="{
type: 'email',
placeholder: 'Enter email',
disabled: isSubmitting
}">Связывание классов: :class
Условно связывайте классы CSS с помощью объекта (ключ = имя класса, значение = условие) или массива.
<div :class="{ 'is-active': isActive, 'has-error': hasError }">...</div>
<!-- Array syntax: -->
<div :class="[baseClass, isActive ? 'active' : '']">
<!-- Dynamic in script setup: -->
:class="{ card: true, [variantClass]: true }"Связывание стилей: :style
Связывайте встроенные стили с помощью объекта в формате camelCase.
<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">v-on — обработка событий
v-on:event или сокращённая запись @event добавляет обработчики событий.
<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>Модификаторы событий
Vue предоставляет встроенные модификаторы событий: .prevent (preventDefault), .stop (stopPropagation), .once (срабатывает один раз), .self (только если целью является сам элемент), .passive (повышает производительность прокрутки).
<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">Быстрая проверка
Когда следует использовать v-show вместо v-if?
Повторение: директивы Vue
v-if удаляет элементы из DOM и добавляет их обратно. v-show переключает отображение. v-for отображает списки (всегда указывайте :key). v-bind (:) связывает атрибуты, :class и :style. v-on (@) добавляет обработчики событий. Модификаторы событий .prevent, .stop и .once. v-model обеспечивает двустороннее связывание, объединяя v-bind:value и v-on:input.
Часто задаваемые вопросы
Урок «Директивы: v-if, v-for, v-bind и v-on» бесплатный?
Да — полный текст урока «Директивы: v-if, v-for, v-bind и v-on» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Директивы: v-if, v-for, v-bind и v-on»?
Условно отображайте элементы с v-if и v-show, выполняйте циклы с v-for, динамически связывайте атрибуты через v-bind и прослушивайте события DOM с помощью v-on. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Директивы: v-if, v-for, v-bind и v-on»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Vue SFC: script, template и style
- Options API: data, methods и computed
- Директивы: v-if, v-for, v-bind и v-on
- Props и события компонентов