Како имплементирати условно приказивање у Вуе.јс

Вуе.јс је популаран ЈаваСцрипт оквир који олакшава креирање динамичких веб апликација. Вуе.јс може да прикаже садржај на основу података и догађаја. Ово је посебно корисно за креирање прилагодљивих и интерактивних корисничких интерфејса.

Сазнајте шта су Вуе директиве и како да их користите за постизање условног рендеровања у Вуе.јс.

Шта су Вуе директиве?

Вуе директиве вам омогућавају да побољшате понашање ХТМЛ елемената у Вуе.јс шаблонима тако што ћете им додати јединствене атрибуте.

Директиве су основни део Вуе.јс и пружају једноставан и моћан начин за манипулацију Модел објекта документа (ДОМ), додати динамичко понашање елементима и управљати подацима.

Поред тога, Вуе.јс вам омогућава да креирате прилагођене директиве, што вам омогућава да лако креирате функције за вишекратну употребу за Вуе апликације.

Вуе оквир својим директивама ставља префикс са "в-" испред назива директиве. Примери често коришћених директива у Вуе-у укључују в-он, в-бинд, в-за, и в-иф.

Шта је условно приказивање?

Условно приказивање вам омогућава да прикажете или сакријете елементе на основу услова које одредите. На пример, можете да користите условно приказивање да бисте приказали поруку корисницима само ако су унели исправну адресу е-поште.

У Вуе.јс можете користити директиве као што су в-иф и в-схов да бисте постигли условно приказивање у вашој апликацији, другачије од онога како бисте рендер садржај условно у Реацт.јс.

Постизање условног приказивања са в-иф директивом

Слично ЈаваСцрипт ако друго изјава, тхе в-иф директива у Вуе.јс држи услов. Ако није задовољен, Вуе.јс процењује следећи услов наведен у а в-друго директиву и наставља то да ради све док не испуни неки услов или не процени све услове.

Ова директива вам омогућава да условно прикажете елемент на основу логичке вредности. Компајлер Вуе.јс неће приказати део ако је његова вредност лажна.

Ево примера условног приказивања садржаја са в-иф:

хтмл>
<хтмлланг="ен">
<глава>
<наслов>Документнаслов>
<скриптасрц=" https://unpkg.com/vue@3/dist/vue.global.js">скрипта>
глава>
<тело>
<дивид="апликација">
<х1в-иф='лажно' >{{ порука1 }}х1>
<х1в-друго >{{ порука2 }}х1>
див>
<скрипта>
 цонст апп = Вуе.цреатеАпп({
 подаци () {
 врати {
 мессаге1: 'Ово је ваша Вуе апликација.',
 мессаге2: 'Још није Вуе апликација.'
 }
 }
 })
 апп.моунт('#апп')
скрипта>
тело>
хтмл>

Блок кода изнад приказује Вуе апликацију креирану додавањем а Мрежа за испоруку садржаја (ЦДН) везу до тела ваше ХТМЛ датотеке. Директива в-иф ће приказати х1 елемент само ако је његов услов тачан.

У Вуе апликацијама постоје ситуације у којима морате да прикажете компоненту на основу специфичних динамичких критеријума. Ово је корисно у сценаријима као што је приказивање информација само када корисник кликне на дугме или приказивање индикатора учитавања док се подаци учитавају из АПИ-ја.

На пример:

хтмл>
<хтмлланг="ен">
<глава>
<наслов>Вуе апликацијанаслов>
<скриптасрц=" https://unpkg.com/vue@3/dist/vue.global.js">скрипта>
глава>
<тело>
<дивид="апликација">
<дивв-иф="сховУсерс">
<ул>
<ли>Корисник1ли>
<ли>Усер2ли>
ул>
див>
<дугмев-он: кликните="тогглеСховУсерс()">
 Укључи кориснике
дугме>
<х1>{{ порука }}х1>
див>
<скрипта>
 цонст апп = Вуе.цреатеАпп({
 подаци () {
 врати {
 сховУсерс: истина,
 порука: 'Ово је ваша Вуе апликација.'
 }
 },
 методе: {
 тогглеСховУсерс() {
 тхис.сховУсерс = !тхис.сховУсерс
 }
 }
 })
 апп.моунт('#апп')
скрипта>
тело>
хтмл>

Горњи блок кода користи в-иф директива за условно приказивање садржаја на основу вредности логичке променљиве, сховУсерс.

Тхе див елемент се приказује ако је вредност истина и скривено ако јесте лажно. Кликом на Укључи кориснике дугме активира тогглеСховУсерс() метод за промену вредности сховУсерс.

Овај пример такође користи в-он директива за слушање догађаја, као што је догађај клика на дугме. Поново процењује в-иф директива кад год је вредност од сховУсерс Промене.

Постизање условног приказивања са в-схов директивом

Тхе в-схов директива је још један начин да се елементи у Вуе.јс-у условно прикажу или сакрију. Слично је са в-иф директива у томе што може да прикаже елементе на основу Буловог израза. Међутим, постоје неке критичне разлике између ове две директиве.

Тхе в-схов директива не уклања елемент из ДОМ-а када се израз процени као нетачан. Уместо тога, користи ЦСС за пребацивање елемената приказ имовине између ниједан и његову првобитну вредност.

То значи да је елемент још увек присутан у ДОМ-у, али није видљив када је израз лажан.

Ево примера:

<тело>
<дивид="апликација">
<дивв-иф="сховУсерс">
<ул>
<ли>Корисник1ли>
<ли>Усер2ли>
ул>
див>
<дугмев-он: кликните="тогглеСховУсерс()">
 Укључи кориснике
дугме>
<х1в-схов="сховУсерс">{{ порука }}х1>
див>
<скрипта>
 цонст апп = Вуе.цреатеАпп({
 подаци () {
 врати {
 сховУсерс: истина,
 порука: 'Ово су корисници апликације Вуе'
 }
 },
 методе: {
 тогглеСховУсерс() {
 тхис.сховУсерс = !тхис.сховУсерс
 }
 }
 })
 апп.моунт('#апп')
скрипта>
тело>

Горњи блок кода користи в-схов директива за приказ поруке у којој се наводи, 'Ово су корисници апликације Вуе' сваки пут када кликнете на дугме за пребацивање.

Бирање између в-иф и в-схов

Када се одлучујете између употребе в-иф и в-схов директиве за условно приказивање или сакривање елемената у Вуе.јс, постоје неки важни фактори које треба узети у обзир.

Када се стање ретко мења, коришћењем в-иф директива је добра. То је зато в-иф уклања елемент из ДОМ-а када је услов нетачан, што може ометати оптималне перформансе. Елемент се приказује само када услов постане истинит и уклања се из ДОМ-а када услов поново постане нетачан.

С друге стране, ако је вероватно да ће се стање често мењати, боље је користити в-схов директива, која побољшава перформансе. То је зато в-схов користи ЦСС да сакрије или прикаже елемент тако што пребацује својство приказа ЦСС између „ноне“ и „блок“, остављајући елемент увек приказан у ДОМ-у.

Условно приказивање у вашој Вуе апликацији је постало лако

Научили сте да условно приказујете садржај у Вуе апликацијама помоћу в-иф и в-схов директива. Користећи ове директиве, можете брзо да прикажете садржај на основу различитих услова, дајући вам већу контролу над изгледом и понашањем ваших Вуе компоненти.