Vue.js - это простая в освоении и доступная библиотека, в которой мы можем начать создавать веб-приложения, обладая базовыми знаниями в области веб-разработки. В Vue.js разработчики любят кодировать и чувствовать свободу при разработке приложений.

В любом динамическом веб-приложении условный рендеринг является необходимой частью. Vue.js предоставляет различные способы условного рендеринга, и мы можем использовать любой из следующих способов, которые подходят для нашей цели:

• v-шоу
• v-если
• v-else

В этой статье мы попробуем эти директивы, предоставленные Vue.js для условного рендеринга и лучше понять их.

v-шоу

V-шоу скрывает элемент, только отключив его видимость. Он скрывает элемент, если значение переданного выражения или переменной не соответствует действительности.

Например:

Этот абзац не скрыт

Этот абзац скрыт

v-если

С другой стороны, v-if не скрывает элемент, но также ничего не отображает, пока значение переданного выражения или переменной не станет истинным.

Например:

В директиве v-if есть дополнительная функция по сравнению с директивой v-show. Мы также можем применить его к блоку шаблона, если мы не хотим отображать что-либо между этим блоком. Либо в этом элементе есть дочерний компонент, либо во многих других элементах.

Например:

v-еще

Мы также можем использовать директиву v-else вместе с оператором v-if для условного рендеринга между любым из двух блоков. Но, имея в виду, что блок v-else должен появляться сразу после блока v-if.

Например:

Этот абзац будет отображаться, если isVar станет истинным

В противном случае этот абзац будет отображаться.

Мы также можем применить v-else к блоку шаблона.

v-else-если

Как и v-else, мы также можем использовать директиву v-else-if вместе с директивой v-if.

Например:

v-if vs. v-шоу

V-if и v-show как бы выполняют одну и ту же задачу. Оба они скрывают элементы в DOM на основе истинного или ложного значения переданного выражения, но с тонкой разницей в скрытии и не отображении элементов.

Если мы сравним время и стоимость обработки между этими двумя. V-if стоит дороже во время выполнения или переключения, в то время как v-show стоит дороже в начале рендеринга. Итак, было бы разумно использовать v-show, когда переключение является целью. В противном случае предпочтительнее v-if.

Подведение итогов

В этой статье мы узнали, как условно отрендерить DOM во Vue.js с использованием директив v-if и v-else. Мы показали несколько примеров и узнали о реальной разнице между директивой v-show и v-if. Если эта статья поможет вам лучше понять и понять концепции, продолжайте посещать linuxhint.com за такой полезный контент.