Tingimuslik renderdamine/kuva Vue-s koos v-if, v-show, v-else ja v-else-if

Sissejuhatus

Vue.js on lihtne veebirakenduse raamistik dünaamiliste veebiliideste loomiseks ja Ühelehelised rakendused (SPA-d). Neid rakendusi luues sageli tahame renderdama midagi kindla kriteeriumi alusel – this is the essence of conditional rendering.

Tingimuslik renderdamine viitab võimalusele renderdada erineva kasutajaliidese (UI) märgistust olenevalt sellest, kas tingimus on tõene või mitte. Seda mõistet kasutatakse sageli sellistes kontekstides nagu komponentide näitamine või peitmine (lülitamine), rakenduse funktsionaalsuse vahetamine, autentimise ja autoriseerimise käsitlemine ja palju muud.

In this article, we’ll look at various ways of conditionally rendering in Vue.js by using the v-if, v-else-ifja v-else direktiivid. Vaatame ka mõningaid näiteid ja toome välja erinevused nende vahel v-if ja v-show.

v-kui

. v-if direktiiv on harjunud tinglikult renderdada plokk mis tähendab plokki koos v-if atribuut on ainult valmistatud if the directive’s expression returns a true väärtus. Kui avaldis annab vale tulemuse (näiteks null, 0, tühi string, false), element on kustutatud DOM-ist.

Let’s illustrate this behavior on the practical example:

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

Alates login on seatud väärtusele true, <div> sisaldav plokk v-if direktiiv koostatakse, seega kuvatakse.

v-kui vs v-show

Väärib märkimist, et v-show toimiks ka ülaltoodud näites ja toimiks näiliselt identselt, kuid neil kahel on vahe.

v-if tinglikult renderdab element, kusjuures v-show tinglikult näitab/näitab element.

See tähendab, et tingimuse ümberlülitamisel, v-if tegelikult kustutab ja taastab komponendid wile v-show muudab need lihtsalt nähtamatuks või nähtavaks. Järgmine animatsioon illustreerib, kuidas v-if tegelikult kustutab ja taastoodab koodiplokke:

Samal ajal v-show säilitab elemendi alati DOM-is ja muudab lihtsalt selle CSS-i, et muuta selle välimust (seades selle display et none):

v-muu

. v-else direktiiv on a v-if direktiiv, mis võimaldab teil kohandada false value in conditional renderings. If it isn’t true, Mida saab kasutada v-else et määratleda, mis selle asemel juhtuma peaks.

Oletame näiteks, et meil on sisestatud parool ja me tahame, et see annaks veateate, “Weak Password”, kui sisendi pikkus on väiksem kui 6 või kuva “Strong Password” kui pikkus on suurem kui 6.

See on tingimuslik renderdus, kus on võimalus käsitleda valejuhtumit:

<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>

Let’s utilize this to toggle contents of a simple login page so it changes the message based on whether a user is logged in or not. We’ll modify the button wording based on the userLoggedIn staatus samuti:

<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>

Nupu klõpsamise sündmus lülitab sisse userLoggedIn andmeüksus ja see mõjutab kuvatavaid andmeid, nagu allpool näha:

v-muu-kui

v-else-if extends a v-if koos else...if block. This is similar to JavaScript’s else...if blokk, kuna see võimaldab meil olemasolevale lisada if-lause v-if. Seda kasutatakse siis, kui kontrollitavaid kriteeriume on palju ja seda saab mitu korda aheldada:

<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>

Järeldus

In this article, we’ve seen how to conditionally render an element with v-if, v-elseja v-else-if. Selgitasime ka erinevust v-if ja v-show.

• Münditark. Euroopa parim Bitcoini ja krüptobörs.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. TASUTA PÄÄS.
• CryptoHawk. Altcoini radar. Tasuta prooviversioon.
• Allikas: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/