Руководство
Основы
- Установка
- Введение
- Экземпляр Vue
- Синтаксис шаблонов
- Вычисляемые свойства и слежение
- Работа с классами и стилями
- Условная отрисовка
- Отрисовка списков
- Обработка событий
- Работа с формами
- Основы компонентов
Продвинутые компоненты
- Регистрация компонентов
- Входные параметры
- Пользовательские события
- Слоты
- Динамические и асинхронные компоненты
- Обработка крайних случаев
Переходы и анимации
- Анимирование списков и появления/исчезновения
- Анимирование переходов между состояниями
Переиспользование и композиция
- Примеси
- Пользовательские директивы
- Render-функции и JSX
- Плагины
- Фильтры
Инструментарий
- Однофайловые компоненты
- Тестирование
- Поддержка TypeScript
- Публикация на production
Масштабирование
- Роутинг
- Управление состоянием приложения
- SSR. Отрисовка на стороне сервера
- Безопасность
Продвинутые темы
- Подробно о реактивности
Вопросы миграции
- Миграция с Vue 1.x
- Миграция с Vue Router 0.7.x
- Миграция с Vuex 0.6.x на 1.0
Мета
- Сравнение с другими фреймворками
- Присоединяйтесь к сообществу Vue.js!
- Познакомьтесь с командой
Эта документация для версий v2.x и ранее. Для v3.x, документация на русском здесь.
Условная отрисовка
v-if
Директива v-if
используется для рендеринга блока по условию. Блок будет отображаться только в том случае, если выражение директивы возвращает значение, приводимое к true.
|
Также можно добавить блок «иначе», используя директиву v-else
:
|
Условные группы с использованием v-if
и <template>
Поскольку v-if
— директива, она должна быть указана в одном конкретном теге. Но что если мы хотим управлять отображением сразу нескольких элементов? В таком случае можно применить v-if
к псевдоэлементу <template>
, который служит невидимой обёрткой и сам в результатах отрисовки не появляется.
|
v-else
Для указания блока «иначе» для v-if
можно использовать директиву v-else
:
|
Элемент с директивой v-else
должен следовать сразу за элементом с директивой v-if
или v-else-if
, иначе он не будет распознан.
v-else-if
Добавлено в версии 2.1.0+
Как следует из названия, v-else-if
служит в качестве блока «else if» для директивы v-if
. Можно объединять эти директивы в длинные цепочки:
|
Как и v-else
, v-else-if
должен следовать сразу за элементом с v-if
или v-else-if
.
Управление повторным использованием элементов при помощи key
Vue старается управлять элементами DOM настолько эффективно, насколько это возможно, зачастую переиспользуя их вместо того чтобы создавать заново. Кроме улучшения производительности, у этого подхода есть и другие преимущества. Например, если вы позволяете пользователю переключаться между несколькими возможными типами логина:
|
Изменение loginType
в коде выше не сотрёт то, что пользователь ввёл в поле. Оба шаблона используют одни и те же элементы, поэтому <input>
не заменяется — только его placeholder
.
Попробуйте сами, введя что-нибудь в поле ввода и нажав на кнопку переключения:
Иногда такое поведение нежелательно, поэтому Vue можно явно указать: «эти элементы должны быть полностью независимы, не надо их переиспользовать». Для этого всего лишь нужно указать уникальное значение ключа key
:
|
Теперь эти поля ввода будут отрисовываться заново при каждом переключении:
Обратите внимание, элементы <label>
всё ещё эффективно переиспользуются, поскольку для них key
не указаны.
v-show
Ещё одну возможность условного отображения предоставляет директива v-show
. Используется она так же:
|
Разница в том, что элемент с v-show
будет всегда оставаться в DOM, а изменяться будет лишь свойство display
в его параметрах CSS.
v-show
не работает на элементе <template>
и не работает с v-else
.
v-if
в сравнении с v-show
v-if
производит «настоящую» условную отрисовку, удостоверяясь что подписчики событий и дочерние компоненты внутри блока должным образом уничтожаются и воссоздаются при изменении истинности управляющего условия.
v-if
ленивый: если условие ложно на момент первоначальной отрисовки, он не произведёт никаких действий — условный блок не будет отображён, пока условие не станет истинным.
v-show
, напротив, куда проще: элемент всегда присутствует в DOM, и только CSS-свойство переключается в зависимости от условия.
В целом, у v-if
выше затраты на переключения, а у v-show
больше затрат на первичную отрисовку. Так что если вы предполагаете, что переключения будут частыми, используйте v-show
, если же редкими или маловероятными — v-if
.
v-if
вместе с v-for
Совместное использование v-if
и v-for
не рекомендуется. Подробнее можно изучить в разделе рекомендаций.
При совместном использовании v-if
и v-for
, директива v-for
имеет более высокий приоритет. Подробнее на странице отрисовки списков.