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

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

• v-шоу
• v-if
• v-ще

У цій статті ми спробуємо ці директиви, надані Vue.js для умовного візуалізації та краще їх зрозуміти.

v-шоу

V-show приховує елемент лише шляхом відключення його видимості. Він приховує елемент, якщо значення переданого виразу або змінної не є правдивими.

Наприклад:

Цей параграф не прихований

Цей параграф приховано

v-if

З іншого боку, v-if не приховує елемент, але також нічого не відображає, поки значення переданого виразу або змінної не стане істинним.

Наприклад:

У директиві v-if є додаткова функція порівняно з директивою v-show. Ми можемо застосувати його і до блоку шаблону, якщо не хочемо нічого відображати між цим блоком. Або в цьому є дочірній компонент, або в багатьох інших елементах.

Наприклад:

v-else

Ми також можемо використовувати директиву v-else разом із інструкцією v-if для умовного візуалізації між будь-яким із двох блоків. Але, маючи на увазі, що блок v-else повинен з'являтися відразу після блоку v-if.

Наприклад:

Цей параграф відображатиметься, якщо значення "isVar" стане істинним

В іншому випадку цей параграф буде відтворений.

Ми також можемо застосувати v-else до блоку шаблонів.

v-else-if

Як і v-else, ми також можемо використовувати директиву v-else-if разом із директивою v-if.

Наприклад:

v-if проти. 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 за такий корисний вміст.