Feltételes renderelés/megjelenítés a Vue-ban v-if, v-show, v-else és v-else-if funkcióval

Bevezetés

A Vue.js egy egyszerű webalkalmazás-keretrendszer dinamikus webes felületek és Egyoldalas alkalmazások (SPA-k). Miközben ezeket az alkalmazásokat létrehozzuk, gyakran szeretnénk adott kritériumok alapján jelenítsen meg valamit – this is the essence of conditional rendering.

A feltételes megjelenítés arra a képességre utal, hogy a feltétel igaz-e vagy sem. Ezt a fogalmat gyakran használják olyan összefüggésekben, mint az összetevők megjelenítése vagy elrejtése (váltás), az alkalmazások funkcióinak váltása, a hitelesítés és az engedélyezés kezelése és még sok más.

In this article, we’ll look at various ways of conditionally rendering in Vue.js by using the v-if, v-else-ifés v-else irányelveket. Nézzünk néhány példát is, és kiemeljük a különbséget a v-if és a v-show.

v-ha

A v-if direktívát szokták feltételesen renderel egy blokkot jelentése a blokk a v-if attribútum csak lesz előállított if the directive’s expression returns a true érték. Ha a kifejezés érvénytelen eredményt ad (pl. null, 0, üres karakterlánc, false), az elem az törölve a DOM-ból.

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>

Óta login be van állítva true, a <div> blokkot tartalmazó v-if direktíva jön létre, így megjelenik.

v-ha vs v-show

Érdemes megjegyezni, hogy a v-show a fenti példában is működne, és látszólag azonos módon működne, de van különbség a kettő között.

v-if feltételesen rendereli egy elem, míg v-show feltételesen mutatja/megjeleníti egy elem.

Ez azt jelenti, hogy amikor a feltételes módot kapcsolja, v-if valójában törli és visszaállítja a wile összetevőket v-show csak láthatatlanná vagy láthatóvá teszi őket. Az alábbi animáció szemlélteti, hogyan v-if valójában törli és reprodukálja a kódblokkokat:

Eközben v-show mindig megtartja az elemet a DOM-ban, és csak megváltoztatja a CSS-jét, hogy megváltoztassa a megjelenését (beállításával display nak nek none):

v-egyéb

A v-else direktíva a v-if direktíva, amely lehetővé teszi a false value in conditional renderings. If it isn’t true, Akkor v-else hogy helyette mi történjen.

Tételezzük fel például, hogy bevittünk egy jelszót, és azt szeretnénk, hogy hibaüzenetet adjon, “Weak Password”, ha a bemenet hossza kisebb, mint 6 vagy kijelző “Strong Password” ha a hossza nagyobb, mint 6.

Ez egy feltételes leképezés, a hamis eset kezelésének lehetőségével:

<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 állapota is:

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

A gomb kattintási eseménye átkapcsolja a userLoggedIn adatelemet, és ez hatással lesz a megjelenített adatokra az alábbiak szerint:

v-else-if

v-else-if extends a v-if egy else...if block. This is similar to JavaScript’s else...if blokk, ami lehetővé teszi, hogy egy if utasítást adjunk egy meglévőhöz v-if. Ez akkor használatos, ha sok feltételt kell ellenőrizni, és többször is láncolható:

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

Következtetés

In this article, we’ve seen how to conditionally render an element with v-if, v-elseés v-else-if. Megmagyaráztuk a különbséget is v-if és a v-show.

• Coinsmart. Európa legjobb Bitcoin- és kriptográfiai tőzsdéje.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. SZABAD HOZZÁFÉRÉS.
• CryptoHawk. Altcoin radar. Ingyenes próbaverzió.
• Forrás: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/