Pogojno upodabljanje/prikaz v Vue z v-if, v-show, v-else in v-else-if

Predstavitev

Vue.js je preprosto ogrodje spletne aplikacije za ustvarjanje dinamičnih spletnih vmesnikov in Enostranske aplikacije (SPA). Ko ustvarjamo te aplikacije, pogosto želimo upodobiti nekaj na podlagi določenega kriterija – to je bistvo pogojnega upodabljanja.

Pogojno upodabljanje se nanaša na zmožnost upodabljanja ločenih oznak uporabniškega vmesnika (UI) glede na to, ali je pogoj resničen ali ne. Ta pojem se pogosto uporablja v kontekstih, kot so prikazovanje ali skrivanje komponent (preklapljanje), preklapljanje med funkcionalnostmi aplikacije, obravnavanje avtentikacije in avtorizacije ter še veliko več.

V tem članku si bomo ogledali različne načine pogojnega upodabljanja v Vue.js z uporabo v-if, v-else-ifin v-else direktive. Ogledali si bomo tudi nekaj primerov in poudarili razliko med v-if in v-show.

v-če

O v-if direktiva se uporablja za pogojno upodobi blok kar pomeni blok z v-if atribut bo samo proizvaja če izraz direktive vrne a true vrednost. Če izraz ustvari neveljaven rezultat (npr. null, 0, prazen niz, false), element je izbrisano iz DOM-a.

Ponazorimo to vedenje na praktičnem primeru:

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

Od leta login nastavljena na trueje <div> blok, ki vsebuje v-if bo izdelana direktiva, ki bo tako prikazana.

v-če vs v-oddaja

Omeniti velja, da je v-show bi delovalo tudi v zgornjem primeru in bi delovalo na videz enako, vendar obstaja razlika med obema.

v-if pogojno upodablja element, medtem ko v-show pogojno pokaže/prikaže element.

To pomeni, da ko je pogojnik preklopljen, v-if bo dejansko izbrisal in obnovil komponente v-show le naredi jih nevidne ali vidne. Naslednja animacija prikazuje, kako v-if dejansko izbriše in reproducira kodne bloke:

Medtem, v-show bo vedno ohranil element v DOM in bo samo spremenil njegov CSS, da bo preklopil njegov videz (z nastavitvijo njegovega display do none):

v-drugo

O v-else direktiva je a v-if direktivo, ki vam omogoča prilagajanje false vrednost v pogojnih upodobitvah. Če ni true, Lahko uporabite v-else določiti, kaj naj se namesto tega zgodi.

Recimo, da imamo vneseno geslo in želimo, da se prikaže sporočilo o napaki, "Šibko geslo", če je dolžina vnosa manjša od 6 ali prikaz "Močno geslo" če je dolžina večja od 6.

To je pogojno upodabljanje z možnostjo ravnanja z lažnimi velikimi in malimi črkami:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Uporabimo to za preklop vsebine preproste prijavne strani, tako da spremeni sporočilo glede na to, ali je uporabnik prijavljen ali ne. Besedilo gumba bomo spremenili glede na userLoggedIn status tudi:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

Dogodek klika gumba bo preklopil userLoggedIn podatkovno postavko, kar bo vplivalo na prikazane podatke, kot je prikazano spodaj:

v-sicer-če

v-else-if extends a v-if s else...if blok. To je podobno JavaScriptu else...if blok v tem, da nam omogoča, da dodamo stavek if obstoječemu v-if. To se uporablja, ko je treba preveriti veliko meril in jih je mogoče večkrat verižiti:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

zaključek

V tem članku smo videli, kako pogojno upodobiti element z v-if, v-elsein v-else-if. Pojasnili smo tudi razliko med v-if in v-show.

• Coinsmart. Najboljša evropska borza bitcoinov in kriptovalut.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. PROST DOSTOP.
• CryptoHawk. Altcoin radar. Brezplačen preizkus.
• Vir: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/