Jak implementovat podmíněné vykreslování ve Vue.js

Vue.js je populární framework JavaScript, který usnadňuje vytváření dynamických webových aplikací. Vue.js dokáže vykreslit obsah na základě dat a událostí. To je užitečné zejména pro vytváření citlivých a interaktivních uživatelských rozhraní.

Zjistěte, co jsou direktivy Vue a jak je používat k dosažení podmíněného vykreslování ve Vue.js.

Co jsou směrnice Vue?

Direktivy Vue umožňují vylepšit chování prvků HTML v šablonách Vue.js přidáním jedinečných atributů.

Direktivy jsou základní součástí Vue.js a poskytují jednoduchý a účinný způsob, jak s nimi manipulovat Objektový model dokumentu (DOM), přidat dynamické chování prvků a spravovat data.

Vue.js vám navíc umožňuje vytvářet vlastní direktivy, což vám umožňuje snadno vytvářet opakovaně použitelné funkce pro aplikace Vue.

Framework Vue předponuje svým direktivám s "proti-" před názvem směrnice. Příklady běžně používaných direktiv ve Vue zahrnují v-on, v-vázat, v-pro, a v-jestliže.

Co je podmíněné vykreslování?

Podmíněné vykreslování umožňuje zobrazit nebo skrýt prvky na základě zadaných podmínek. Podmíněné vykreslování můžete například použít k zobrazení zprávy uživatelům pouze v případě, že zadali platnou e-mailovou adresu.

Ve Vue.js můžete použít direktivy jako např v-jestliže a v-show k dosažení podmíněného vykreslování ve vaší aplikaci, které se liší od způsobu, jakým byste to udělali podmíněně vykreslovat obsah v React.js.

Dosažení podmíněného vykreslení pomocí směrnice v-if

Podobný JavaScript kdyby...jinak prohlášení, v-jestliže direktiva ve Vue.js má podmínku. Pokud není splněna, Vue.js vyhodnotí následující podmínku uvedenou v a v-jinak a pokračuje v tom, dokud buď nesplní podmínku, nebo nevyhodnotí všechny podmínky.

Tato direktiva vám umožňuje podmíněně vykreslit prvek na základě booleovské hodnoty. Kompilátor Vue.js nevykreslí součást, pokud je její hodnota nepravdivá.

Zde je příklad podmíněného vykreslování obsahu pomocí v-jestliže:

html>
<htmllang="en">
<hlava>
<titul>Dokumenttitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlava>
<tělo>
<divid="aplikace">
<h1v-jestliže='Nepravdivé' >{{ zpráva1 }}h1>
<h1v-jinak >{{ zpráva2 }}h1>
div>
<skript>
 const app = Vue.createApp({
 data () {
 vrátit se {
 message1: 'Toto je vaše aplikace Vue.',
 message2: 'Zatím to není aplikace Vue.'
 }
 }
 })
 app.mount('#app')
skript>
tělo>
html>

Blok kódu výše zobrazuje aplikaci Vue vytvořenou přidáním a Content Delivery Network (CDN) odkaz na tělo vašeho HTML souboru. Direktiva v-if vykreslí prvek h1 pouze v případě, že je jeho podmínka pravdivá.

V aplikacích Vue existují situace, kdy potřebujete vykreslit komponentu na základě specifických dynamických kritérií. To je užitečné ve scénářích, jako je zobrazení informací pouze tehdy, když uživatel klikne na tlačítko, nebo zobrazení indikátoru načítání při načítání dat z rozhraní API.

Například:

html>
<htmllang="en">
<hlava>
<titul>Aplikace Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlava>
<tělo>
<divid="aplikace">
<divv-jestliže="zobrazit uživatele">
<ul>
<li>Uživatel1li>
<li>Uživatel2li>
ul>
div>
<knoflíkv-on: klikněte="toggleShowUsers()">
 Přepnout uživatele
knoflík>
<h1>{{ zpráva }}h1>
div>
<skript>
 const app = Vue.createApp({
 data () {
 vrátit se {
 zobrazit Uživatelé: pravda,
 zpráva: 'Toto je vaše aplikace Vue.'
 }
 },
 metody: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
skript>
tělo>
html>

Výše uvedený blok kódu používá v-jestliže direktiva pro podmíněné vykreslení obsahu na základě hodnoty booleovské proměnné, zobrazit uživatele.

The div prvek se zobrazí, pokud je hodnota skutečný a pokud je skrytá Nepravdivé. Kliknutím na Přepnout uživatele tlačítko spouští toggleShowUsers() způsob, jak změnit hodnotu zobrazit uživatele.

Tento příklad také používá v-on direktiva k naslouchání událostem, jako je událost kliknutí na tlačítko. Přehodnocuje v-jestliže směrnice vždy, když hodnota zobrazit uživatele Změny.

Dosažení podmíněného vykreslování pomocí směrnice v-show

The v-show direktiva je další způsob, jak podmíněně zobrazit nebo skrýt prvky ve Vue.js. Je to podobné jako u v-jestliže direktiva v tom, že dokáže vykreslit prvky založené na booleovských výrazech. Mezi těmito dvěma směrnicemi však existují určité zásadní rozdíly.

The v-show direktiva neodstraní prvek z DOM, když je výraz vyhodnocen jako false. Místo toho používá CSS k přepínání prvků Zobrazit majetek mezi žádný a jeho původní hodnotu.

To znamená, že prvek je stále přítomen v DOM, ale není viditelný, když je výraz nepravdivý.

Zde je příklad:

<tělo>
<divid="aplikace">
<divv-jestliže="zobrazit uživatele">
<ul>
<li>Uživatel1li>
<li>Uživatel2li>
ul>
div>
<knoflíkv-on: klikněte="toggleShowUsers()">
 Přepnout uživatele
knoflík>
<h1v-show="zobrazit uživatele">{{ zpráva }}h1>
div>
<skript>
 const app = Vue.createApp({
 data () {
 vrátit se {
 zobrazit Uživatelé: pravda,
 zpráva: 'Toto jsou uživatelé aplikace Vue'
 }
 },
 metody: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
skript>
tělo>

Výše uvedený blok kódu používá v-show direktiva pro zobrazení zprávy, která říká:Toto jsou uživatelé aplikace Vue kdykoli kliknete na přepínací tlačítko.

Výběr mezi v-if a v-show

Při rozhodování mezi použitím v-jestliže a v-show direktivy pro podmíněné zobrazení nebo skrytí prvků ve Vue.js, je třeba zvážit některé důležité faktory.

Když se stav změní jen zřídka, pomocí v-jestliže směrnice je dobrá. To je proto, že v-jestliže odebere prvek z DOM, když je podmínka nepravdivá, což může bránit optimálnímu výkonu. Prvek se vykreslí, až když se podmínka stane pravdivou, a odstraní se z modelu DOM, když se podmínka opět stane nepravdivou.

Na druhou stranu, pokud se stav pravděpodobně často mění, je lepší použít v-show směrnice, která zlepšuje výkon. To je proto, že v-show používá CSS ke skrytí nebo zobrazení prvku přepnutím vlastnosti zobrazení CSS mezi none a block, takže prvek bude vždy vykreslen na DOM.

Snadné podmíněné vykreslování ve vaší aplikaci Vue

Naučili jste se podmíněně vykreslovat obsah v aplikacích Vue pomocí direktiv v-if a v-show. Pomocí těchto direktiv můžete rychle vykreslit obsah na základě různých podmínek, což vám poskytne větší kontrolu nad vzhledem a chováním vašich komponent Vue.