Какие есть директивы условного рендера во VueJS?
VueJS предлагает набор директив для показа или скрытия HTML-элементов, компонентов в зависимости от условий. Доступны следующие директивы: v-if, v-else, v-else-if и v-show
1. v-if: добавляет или удаляет DOM елемент в зависимости от результата указанного выражения. Например, в коде ниже кнопка не будет показана, если в isLoggedIn записано false.
2. v-else: используется для отображения контента только если выражению для v-if возвращает false. Это очень схоже с блоком else в любом языке программирования для отображения альтернативного контента. В отличие от v-if и v-else-if не требует значения. Например, v-else можно использовать для отображения кнопки "Войти" если isLoggedIn === false (не авторизован).
3. v-else-if: используется если нам необходимо проверить более одного условия и для каждого отобразить свой контент. Например, мы хотим отобразить какой-то текст вместо кнопки "Войти" когда isLoginDisabled === true. При помощи v-else у нас не получится это реализовать.
4. v-show: Эта директива похожа на v-if, но она рендерит все элементы в DOM-дерево, а затем применяет на них CSS-свойство display для показа/скрытия элементов. Эта директива рекомендуется если элементы переключаются между состояниями очень часто.
Отметьте свой прогресс