Vue.js е лесна за научаване и достъпна библиотека, която можем да започнем да изграждаме уеб приложения в нея с основните знания за уеб разработка. Във Vue.js, разработчиците обичат да кодират и чувстват свобода, докато разработват приложения.
Във всяко динамично уеб приложение условното изобразяване е необходима част. Vue.js предоставя различни начини за условно изобразяване и ние можем да използваме всеки от следните начини, които отговарят на нашата цел:
- v-шоу
- v-if
- v-друго
В тази статия ще изпробваме тези директиви, предоставени от Vue.js за условно изобразяване и ги разберете по-добре.
v-шоу
V-showът скрива елемента само като деактивира видимостта му. Той скрива елемента, ако стойността на предадения израз или променлива не е вярна.
Например:
Този параграф не е скрит
Този параграф е скрит
v-if
От друга страна, v-if не скрива елемента, но също така не изобразява нищо, докато стойността на предадения израз или променлива стане вярна.
Например:
Това е параграф
В директивата v-if има допълнителна функция в сравнение с директивата v-show. Можем да го приложим и към блока на шаблона, ако не искаме да изобразяваме нищо между този блок. Или има подчинен компонент в този, или много други елементи.
Например:
Това е заглавие
Това е параграф
v-друго
Също така можем да използваме директивата 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 за такова полезно съдържание.