v-if
Директива v-if используется для рендеринга блока по условию. Блок будет отображаться только в том случае, если выражение директивы возвращает значение, приводимое к true.
Также можно добавить блок «иначе», используя директиву v-else:
Условные группы с использованием v-if и <template>
Поскольку v-if — директива, она должна быть указана в одном конкретном теге. Но что если мы хотим управлять отображением сразу нескольких элементов? В таком случае можно применить v-if к псевдоэлементу , который служит невидимой обёрткой и сам в результатах отрисовки не появляется.
v-else
Для указания блока «иначе» для v-if можно использовать директиву v-else:
Элемент с директивой v-else должен следовать сразу за элементом с директивой v-if или v-else-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
Управление повторным использованием элементов при помощи key
Vue старается управлять элементами DOM настолько эффективно, насколько это возможно, зачастую переиспользуя их вместо того чтобы создавать заново. Кроме улучшения производительности, у этого подхода есть и другие преимущества. Например, если вы позволяете пользователю переключаться между несколькими возможными типами логина:
Изменение loginType в коде выше не сотрёт то, что пользователь ввёл в поле. Оба шаблона используют одни и те же элементы, поэтому input не заменяется — только его placeholder.
Иногда такое поведение нежелательно, поэтому Vue можно явно указать: «эти элементы должны быть полностью независимы, не надо их переиспользовать». Для этого всего лишь нужно указать уникальное значение ключа key:
Теперь эти поля ввода будут отрисовываться заново при каждом переключении
Обратите внимание, элементы
v-show
Ещё одну возможность условного отображения предоставляет директива v-show. Используется она так же:
Разница в том, что элемент с v-show будет всегда оставаться в DOM, а изменяться будет лишь свойство display в его параметрах CSS.
Важно
v-show не работает на элементе и не работает с v-else.
v-if в сравнении с v-show
Разница 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 имеет более высокий приоритет. Подробнее на странице отрисовки списков.
Подробнее об этом мы поговорим в следующих уроках