Vue.js ir viegli apgūstama un pieejama bibliotēka, kurā mēs varam sākt veidot tīmekļa lietojumprogrammas ar pamatzināšanām par tīmekļa attīstību. Vue.Js, izstrādātāji mīl kodēt un izjūt brīvību, izstrādājot lietojumprogrammas.

Jebkurā dinamiskajā tīmekļa lietojumprogrammā nosacītā renderēšana ir nepieciešama sastāvdaļa. Vue.js nodrošina dažādus nosacītās renderēšanas veidus, un mēs varam izmantot jebkuru no šiem veidiem, kas atbilst mūsu mērķim:

• v-šovs
• v-ja
• v-cits

Šajā rakstā mēs izmēģināsim šīs Vue sniegtās direktīvas.js nosacītai atveidei un labāk tos saprast.

v-šovs

V-šovs paslēpj tikai elementu, atspējojot tā redzamību. Tas slēpj elementu, ja nodotās izteiksmes vai mainīgā vērtība nav patiesa.

Piemēram:

Šis punkts nav paslēpts

Šī rindkopa ir paslēpta

v-ja

No otras puses, v-if neslēpj elementu, bet arī neko neatveido, kamēr nodotās izteiksmes vai mainīgā vērtība kļūst patiesa.

Piemēram:

Direktīvā v-if ir papildu funkcija salīdzinājumā ar direktīvu v-show. Mēs varam to pielietot arī veidņu blokam, ja mēs nevēlamies kaut ko renderēt starp šo bloku. Vai nu tajā ir bērna komponents, vai arī daudz citu elementu.

Piemēram:

v-cits

Mēs varam izmantot arī direktīvu v-else kopā ar paziņojumu v-if, lai nosacīti renderētu starp jebkuru no diviem blokiem. Bet, paturot prātā, ka blokam v-else ir jāparādās tieši pēc bloka v-if.

Piemēram:

Šis punkts tiks parādīts, ja “isVar” kļūs patiess

Citādi šī rindkopa tiks atveidota.

Veidnes blokā mēs varam piemērot arī v-else.

v-cits-ja

Tāpat kā v-else, mēs varam izmantot arī direktīvu v-else-if kopā ar direktīvu v-if.

Piemēram:

v-ja pret. v-šovs

V-if un v-show veida veic vienu un to pašu uzdevumu. Viņi abi slēpj DOM elementus, pamatojoties uz nodotās izteiksmes patiesumu vai nepatiesību, bet ar smalku elementu paslēpšanas un nepārveidošanas atšķirību.

Ja salīdzinām laiku un apstrādes izmaksas starp šiem diviem. V-if izpildes laikā vai pārslēgšanās laikā maksā vairāk, savukārt renderēšanas sākumā v-show maksā vairāk. Tāpēc būtu prātīgi izmantot v-show, ja pārslēgšana ir mērķtiecīga. Pretējā gadījumā priekšroka tiek dota v-if.

Iesaiņošana

Šajā rakstā mēs esam iemācījušies, kā nosacīti atveidot DOM Vue.js, izmantojot v-if un v-else direktīvas. Mēs esam parādījuši dažus piemērus un uzzinājuši par reālo atšķirību starp v-show un v-if direktīvu. Ja šis raksts palīdz labāk izprast un izprast, turpiniet apmeklēt linuxhint.com par tik noderīgu saturu.