Как да внедрите условно изобразяване във Vue.js

Vue.js е популярна JavaScript рамка, която улеснява създаването на динамични уеб приложения. Vue.js може да визуализира съдържание въз основа на данни и събития. Това е особено полезно за създаване на отзивчиви и интерактивни потребителски интерфейси.

Научете какво представляват директивите на Vue и как да ги използвате, за да постигнете условно изобразяване във Vue.js.

Какво представляват директивите Vue?

Директивите на Vue ви позволяват да подобрите поведението на HTML елементите в шаблоните на Vue.js, като добавите уникални атрибути към тях.

Директивите са основна част от Vue.js и предоставят прост и мощен начин за манипулиране на Обектен модел на документ (DOM), добавяне на динамично поведение към елементите и управление на данни.

Освен това Vue.js ви позволява да създавате персонализирани директиви, което ви позволява лесно да създавате функции за многократна употреба за приложения на Vue.

Рамката Vue префиксира своите директиви с

"v-" преди името на директивата. Примери за често използвани директиви във Vue включват v-on, v-свързване, v-за, и v-ако.

Какво е условно изобразяване?

Условното изобразяване ви позволява да показвате или скривате елементи въз основа на зададени от вас условия. Например, можете да използвате условно изобразяване, за да показвате съобщение на потребителите само ако са въвели валиден имейл адрес.

Във Vue.js можете да използвате директиви като v-ако и v-шоу за да постигнете условно изобразяване във вашето приложение, различно от това, което бихте направили рендирайте съдържание условно в React.js.

Постигане на условно изобразяване с директивата v-if

Подобен на JavaScript ако...друго изявление, на v-ако директива във Vue.js съдържа условие. Ако не е изпълнено, Vue.js оценява следното условие, посочено в a v-друго директива и продължава да го прави, докато изпълни условие или оцени всички условия.

Тази директива ви позволява да изобразите условно елемент въз основа на булева стойност. Компилаторът Vue.js няма да изобрази частта, ако нейната стойност е false.

Ето пример за рендиране на съдържание условно с v-ако:

html>
<htmlезик="bg">
<глава>
<заглавие>Документзаглавие>
<сценарийsrc=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
глава>
<тяло>
<дивдокумент за самоличност="приложение">
<h1v-ако="фалшив" >{{ съобщение1 }}h1>
<h1v-друго >{{ съобщение2 }}h1>
див>
<сценарий>
 const app = Vue.createApp({
 данни () {
 връщане {
 message1: „Това е вашето приложение Vue.“,
 message2: „Все още не е приложение Vue.“
 }
 }
 })
 app.mount('#app')
сценарий>
тяло>
html>

Кодовият блок по-горе изобразява приложение Vue, създадено чрез добавяне на a Мрежа за доставка на съдържание (CDN) връзка към тялото на вашия HTML файл. Директивата v-if ще изобрази елемента h1 само ако условието му е вярно.

В приложенията Vue има ситуации, в които трябва да изобразите компонент въз основа на специфични динамични критерии. Това е полезно в сценарии като показване на информация само когато потребител щракне върху бутон или показване на индикатор за зареждане, докато данните се зареждат от API.

Например:

html>
<htmlезик="bg">
<глава>
<заглавие>Приложение Vueзаглавие>
<сценарийsrc=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
глава>
<тяло>
<дивдокумент за самоличност="приложение">
<дивv-ако="showUsers">
<ул>
<ли>Потребител1ли>
<ли>Потребител2ли>
ул>
див>
<бутонv-on: щракване="toggleShowUsers()">
 Превключване на потребители
бутон>
<h1>{{ съобщение }}h1>
див>
<сценарий>
 const app = Vue.createApp({
 данни () {
 връщане {
 showUsers: вярно,
 съобщение: „Това е вашето приложение Vue.“
 }
 },
 методи: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
сценарий>
тяло>
html>

Горният кодов блок използва v-ако директива за условно изобразяване на съдържание въз основа на стойността на булева променлива, showUsers.

The див елемент се показва, ако стойността е вярно и скрито, ако е така невярно. Щраквайки върху Превключване на потребители бутон задейства toggleShowUsers() метод за промяна на стойността showUsers.

Този пример също използва v-on директива за прослушване на събития, като например събитие за щракване върху бутона. Той преоценява v-ако директива винаги, когато стойността на showUsers промени.

Постигане на условно изобразяване с директивата v-show

The v-шоу директива е друг начин за показване или скриване на елементи във Vue.js условно. То е подобно на v-ако директива, тъй като може да рендира елементи въз основа на булев израз. Съществуват обаче някои критични разлики между двете директиви.

The v-шоу директива не премахва елемента от DOM, когато изразът се изчисли като false. Вместо това той използва CSS за превключване на елементите дисплей собственост между нито един и първоначалната му стойност.

Това означава, че елементът все още присъства в DOM, но не се вижда, когато изразът е false.

Ето един пример:

<тяло>
<дивдокумент за самоличност="приложение">
<дивv-ако="showUsers">
<ул>
<ли>Потребител1ли>
<ли>Потребител2ли>
ул>
див>
<бутонv-on: щракване="toggleShowUsers()">
 Превключване на потребители
бутон>
<h1v-шоу="showUsers">{{ съобщение }}h1>
див>
<сценарий>
 const app = Vue.createApp({
 данни () {
 връщане {
 showUsers: вярно,
 съобщение: „Това са потребителите на приложението Vue“
 }
 },
 методи: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
сценарий>
тяло>

Кодовият блок по-горе използва v-шоу директива за показване на съобщение, което гласи:Това са потребителите на приложението Vue всеки път, когато щракнете върху бутона за превключване.

Избор между v-if и v-show

Когато решавате между използването на v-ако и v-шоу директиви за показване или скриване на елементи във Vue.js условно, има някои важни фактори, които трябва да се вземат предвид.

Когато състоянието се променя рядко, използването на v-ако директивата е добра. Това е така, защото v-ако премахва елемента от DOM, когато условието е невярно, което може да попречи на оптималната производителност. Елементът се изобразява само след като условието стане истина и се премахва от DOM, когато условието отново стане невярно.

От друга страна, ако има вероятност състоянието да се променя често, по-добре е да използвате v-шоу директива, която подобрява производителността. Това е така, защото v-шоу използва CSS, за да скрие или покаже елемента, като превключва свойството CSS display между none и block, оставяйки елемента винаги изобразен в DOM.

Условното изобразяване във вашето приложение Vue стана лесно

Научихте се да изобразявате съдържание условно в приложенията Vue с директивите v-if и v-show. Чрез използването на тези директиви можете бързо да изобразявате съдържание въз основа на различни условия, което ви дава повече контрол върху външния вид и поведението на вашите Vue компоненти.