A feltételes megjelenítés minden nyelven a sablonkészítés döntő része. Fedezze fel a Vue.js megközelítést.

A Vue.js egy népszerű JavaScript-keretrendszer, amely megkönnyíti a dinamikus webalkalmazások létrehozását. A Vue.js adatok és események alapján képes tartalmat megjeleníteni. Ez különösen hasznos reszponzív és interaktív felhasználói felületek létrehozásához.

Ismerje meg, mik azok a Vue direktívák, és hogyan használhatja őket a Vue.js feltételes megjelenítéséhez.

Mik azok a Vue irányelvek?

A Vue direktívák lehetővé teszik a HTML-elemek viselkedésének javítását a Vue.js sablonokban egyedi attribútumok hozzáadásával.

Az irányelvek a Vue.js alapvető részét képezik, és egyszerű és hatékony módot kínálnak a Dokumentumobjektum modell (DOM), dinamikus viselkedést adhat az elemekhez, és kezelheti az adatokat.

Ezenkívül a Vue.js lehetővé teszi egyéni direktívák létrehozását, amelyek segítségével könnyedén hozhat létre újrafelhasználható funkciókat a Vue-alkalmazásokhoz.

A Vue keretrendszer előtagja az direktíváknak

instagram viewer
"v-" az irányelv neve előtt. Példák a Vue-ban gyakran használt direktívákra: v-on, v-kötés, v-for, és v-ha.

Mi az a feltételes renderelés?

A feltételes renderelés lehetővé teszi az elemek megjelenítését vagy elrejtését a megadott feltételek alapján. Használhatja például a feltételes megjelenítést, hogy csak akkor jelenítsen meg üzenetet a felhasználóknak, ha érvényes e-mail címet adtak meg.

A Vue.js-ben olyan direktívákat használhat, mint pl v-ha és v-show feltételes megjelenítés eléréséhez az alkalmazásban, attól eltérően, ahogyan azt tenné feltételesen jelenítse meg a tartalmat a React.js-ben.

Feltételes renderelés elérése a v-if direktívával

Hasonló a JavaScriptet ha más nyilatkozat, a v-ha A Vue.js-ben lévő direktíva egy feltételt tartalmaz. Ha nem teljesül, a Vue.js kiértékeli az a) pontban megadott következő feltételt v-egyéb direktívát, és ezt addig folytatja, amíg az nem teljesíti a feltételt, vagy kiértékeli az összes feltételt.

Ez az utasítás lehetővé teszi egy elem feltételes megjelenítését logikai érték alapján. A Vue.js fordító nem jeleníti meg a részt, ha értéke hamis.

Íme egy példa a tartalom feltételes megjelenítésére v-ha:

html>
<htmllang="en">
<fej>
<cím>Dokumentumcím>
<forgatókönyvsrc=" https://unpkg.com/vue@3/dist/vue.global.js">forgatókönyv>
fej>
<test>
<divid="alkalmazás">
<h1v-ha='hamis' >{{ üzenet1 }}h1>
<h1v-egyéb >{{ üzenet2 }}h1>
div>
<forgatókönyv>
 const app = Vue.createApp({
 adatok () {
 Visszatérés {
 message1: 'Ez az Ön Vue App.',
 üzenet2: "Még nem Vue alkalmazás."
 }
 }
 })
 app.mount('#app')
forgatókönyv>
test>
html>

A fenti kódblokk egy Vue alkalmazást ábrázol, amelyet a hozzáadásával hoztak létre Content Delivery Network (CDN) hivatkozást a HTML-fájl törzsére. A v-if direktíva csak akkor jeleníti meg a h1 elemet, ha a feltétele igaz.

A Vue-alkalmazásokban vannak olyan helyzetek, amikor egy komponenst meghatározott dinamikus feltételek alapján kell renderelni. Ez olyan forgatókönyvekben hasznos, mint például az információk megjelenítése, amikor a felhasználó rákattint egy gombra, vagy betöltésjelző megjelenítése, miközben az adatok betöltődnek egy API-ból.

Például:

html>
<htmllang="en">
<fej>
<cím>Vue alkalmazáscím>
<forgatókönyvsrc=" https://unpkg.com/vue@3/dist/vue.global.js">forgatókönyv>
fej>
<test>
<divid="alkalmazás">
<divv-ha="showUsers">
<ul>
<li>Felhasználó 1li>
<li>Felhasználó2li>
ul>
div>
<gombv-on: kattintson="toggleShowUsers()">
 Felhasználók váltása
gomb>
<h1>{{ üzenet }}h1>
div>
<forgatókönyv>
 const app = Vue.createApp({
 adatok () {
 Visszatérés {
 showUsers: igaz,
 üzenet: "Ez az Ön Vue Appja."
 }
 },
 módszerek: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
forgatókönyv>
test>
html>

A fenti kódblokk a v-ha direktíva a tartalom feltételes megjelenítésére egy logikai változó értéke alapján, showUsers.

A div elem jelenik meg, ha az érték igaz és rejtett, ha van hamis. Kattintson a Felhasználók váltása gomb elindítja a toggleShowUsers() értékének megváltoztatásának módja showUsers.

Ez a példa is a v-on utasítást, hogy figyeljen az eseményekre, például a gombra kattintási eseményre. Újraértékeli a v-ha direktíva, amikor az értéke showUsers változtatások.

Feltételes renderelés elérése a v-show irányelvvel

A v-show A direktíva egy másik módja a Vue.js elemeinek feltételes megjelenítésének vagy elrejtésének. Hasonló a v-ha direktíva annyiban, hogy egy logikai kifejezés alapján képes elemeket megjeleníteni. Van azonban néhány lényeges különbség a két irányelv között.

A v-show direktíva nem távolítja el az elemet a DOM-ból, amikor a kifejezés kiértékelése false. Ehelyett CSS-t használ az elem átváltására kijelző közötti ingatlan egyik sem és eredeti értéke.

Ez azt jelenti, hogy az elem továbbra is jelen van a DOM-ban, de nem látható, ha a kifejezés hamis.

Íme egy példa:

<test>
<divid="alkalmazás">
<divv-ha="showUsers">
<ul>
<li>Felhasználó 1li>
<li>Felhasználó2li>
ul>
div>
<gombv-on: kattintson="toggleShowUsers()">
 Felhasználók váltása
gomb>
<h1v-show="showUsers">{{ üzenet }}h1>
div>
<forgatókönyv>
 const app = Vue.createApp({
 adatok () {
 Visszatérés {
 showUsers: igaz,
 üzenet: "Ezek a Vue alkalmazás felhasználói"
 }
 },
 módszerek: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
forgatókönyv>
test>

A fenti kódblokk a v-show utasítás egy üzenet megjelenítésére, amely kimondja: "Ezek a Vue alkalmazás felhasználói amikor a váltógombra kattint.

Választás a v-if és a v-show között

Amikor eldönti, hogy a v-ha és v-show utasításokat a Vue.js elemeinek feltételes megjelenítésére vagy elrejtésére, néhány fontos tényezőt figyelembe kell venni.

Ha az állapot ritkán változik, használja a v-ha az irányelv jó. Ez azért van, mert v-ha eltávolítja az elemet a DOM-ból, ha a feltétel hamis, ami akadályozhatja az optimális teljesítményt. Az elem csak akkor jelenik meg, ha a feltétel igaz lesz, és eltávolítják a DOM-ból, amikor a feltétel ismét hamis lesz.

Másrészt, ha az állapot valószínűleg gyakran változik, jobb, ha a v-show direktíva, ami javítja a teljesítményt. Ez azért van, mert v-show a CSS-t használja az elem elrejtésére vagy megjelenítésére a CSS megjelenítési tulajdonság none és blokk közötti átkapcsolásával, így az elem mindig a DOM-ban jelenik meg.

Könnyen feltételes renderelés a Vue alkalmazásban

Megtanulta a tartalom feltételes megjelenítését a Vue alkalmazásokban a v-if és v-show direktívákkal. Ezen direktívák használatával gyorsan előállíthat tartalmat a különféle feltételek alapján, így jobban szabályozhatja a Vue összetevői megjelenését és viselkedését.