Ako implementovať podmienené vykresľovanie vo Vue.js

Vue.js je populárny rámec JavaScriptu, ktorý uľahčuje vytváranie dynamických webových aplikácií. Vue.js dokáže vykresliť obsah na základe údajov a udalostí. Toto je obzvlášť užitočné pri vytváraní citlivých a interaktívnych používateľských rozhraní.

Zistite, čo sú direktívy Vue a ako ich používať na dosiahnutie podmieneného vykresľovania vo Vue.js.

Čo sú smernice Vue?

Direktívy Vue vám umožňujú vylepšiť správanie prvkov HTML v šablónach Vue.js pridaním jedinečných atribútov.

Direktívy sú základnou súčasťou Vue.js a poskytujú jednoduchý a účinný spôsob manipulácie Model objektu dokumentu (DOM), pridať dynamické správanie do prvkov a spravovať údaje.

Vue.js vám navyše umožňuje vytvárať vlastné direktívy, čo vám umožňuje jednoducho vytvárať opätovne použiteľné funkcie pre aplikácie Vue.

Rámec Vue predponuje svoje smernice s "v-" pred názvom smernice. Príklady bežne používaných príkazov vo Vue zahŕňajú v-on, v-viazať, v-pre, a v-ak.

Čo je podmienené vykresľovanie?

Podmienené vykresľovanie vám umožňuje zobraziť alebo skryť prvky na základe podmienok, ktoré určíte. Podmienené vykresľovanie môžete napríklad použiť na zobrazenie správy používateľom, iba ak zadali platnú e-mailovú adresu.

Vo Vue.js môžete použiť direktívy ako napr v-ak a v-show na dosiahnutie podmieneného vykresľovania vo vašej aplikácii, ktoré sa líši od toho, ako by ste to urobili vykresľovať obsah podmienene v React.js.

Dosiahnutie podmieneného vykreslenia so smernicou v-if

Podobný JavaScript ak...inak vyhlásenie, v-ak smernica vo Vue.js má podmienku. Ak nie je splnená, Vue.js vyhodnotí nasledujúcu podmienku špecifikovanú v a v-inak a pokračuje v tom, kým buď nesplní podmienku, alebo nevyhodnotí všetky podmienky.

Táto direktíva vám umožňuje podmienene vykresliť prvok na základe boolovskej hodnoty. Kompilátor Vue.js nevykreslí časť, ak je jej hodnota nepravdivá.

Tu je príklad podmieneného vykresľovania obsahu pomocou v-ak:

html>
<htmllang="sk">
<hlavu>
<titul>Dokumenttitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlavu>
<telo>
<divid="aplikácia">
<h1v-ak='false' >{{ správa1 }}h1>
<h1v-inak >{{ správa2 }}h1>
div>
<skript>
 const app = Vue.createApp({
 údaje () {
 vrátiť {
 message1: 'Toto je vaša aplikácia Vue.',
 message2: 'Ešte nie je aplikácia Vue.'
 }
 }
 })
 app.mount('#app')
skript>
telo>
html>

Blok kódu vyššie zobrazuje aplikáciu Vue vytvorenú pridaním a Content Delivery Network (CDN) odkaz na telo súboru HTML. Direktíva v-if vykreslí prvok h1 iba vtedy, ak je jeho podmienka pravdivá.

V aplikáciách Vue existujú situácie, keď potrebujete vykresliť komponent na základe špecifických dynamických kritérií. Je to užitočné v scenároch, ako je zobrazenie informácií iba vtedy, keď používateľ klikne na tlačidlo, alebo zobrazenie indikátora načítania počas načítavania údajov z rozhrania API.

Napríklad:

html>
<htmllang="sk">
<hlavu>
<titul>Aplikácia Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlavu>
<telo>
<divid="aplikácia">
<divv-ak="showUsers">
<ul>
<li>Používateľ1li>
<li>Používateľ2li>
ul>
div>
<tlačidlov-on: kliknutie="toggleShowUsers()">
 Prepnúť používateľov
tlačidlo>
<h1>{{ správa }}h1>
div>
<skript>
 const app = Vue.createApp({
 údaje () {
 vrátiť {
 showUsers: pravda,
 správa: 'Toto je vaša aplikácia Vue.'
 }
 },
 metódy: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
skript>
telo>
html>

Vyššie uvedený blok kódu používa v-ak príkaz na podmienené vykreslenie obsahu na základe hodnoty boolovskej premennej, zobraziť používateľov.

The div prvok sa zobrazí, ak je hodnota pravda a skryté, ak je falošný. Kliknutím na Prepnúť používateľov tlačidlo spúšťa toggleShowUsers() spôsob zmeny hodnoty zobraziť používateľov.

Tento príklad tiež používa v-on príkaz počúvať udalosti, ako napríklad udalosť kliknutia na tlačidlo. Prehodnocuje v-ak vždy, keď je hodnota zobraziť používateľov zmeny.

Dosiahnutie podmieneného vykresľovania so smernicou v-show

The v-show Direktíva je ďalším spôsobom, ako podmienečne zobraziť alebo skryť prvky vo Vue.js. Je to podobné ako v-ak v tom, že dokáže vykresľovať prvky založené na booleovskom výraze. Medzi týmito dvoma smernicami však existujú určité zásadné rozdiely.

The v-show Direktíva neodstráni prvok z DOM, keď sa výraz vyhodnotí ako nepravda. Namiesto toho používa CSS na prepínanie prvkov displej majetok medzi žiadny a jeho pôvodná hodnota.

To znamená, že prvok je stále prítomný v DOM, ale nie je viditeľný, keď je výraz nepravdivý.

Tu je príklad:

<telo>
<divid="aplikácia">
<divv-ak="showUsers">
<ul>
<li>Používateľ1li>
<li>Používateľ2li>
ul>
div>
<tlačidlov-on: kliknutie="toggleShowUsers()">
 Prepnúť používateľov
tlačidlo>
<h1v-show="showUsers">{{ správa }}h1>
div>
<skript>
 const app = Vue.createApp({
 údaje () {
 vrátiť {
 showUsers: pravda,
 správa: „Toto sú používatelia aplikácie Vue“
 }
 },
 metódy: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
skript>
telo>

Vyššie uvedený blok kódu používa v-show príkaz na zobrazenie správy, ktorá uvádza:Toto sú používatelia aplikácie Vue kedykoľvek kliknete na prepínač.

Výber medzi v-if a v-show

Pri rozhodovaní medzi použitím v-ak a v-show direktívy na podmienené zobrazenie alebo skrytie prvkov vo Vue.js, je potrebné zvážiť niekoľko dôležitých faktorov.

Keď sa stav zmení len zriedka, pomocou v-ak smernica je dobrá. To je preto, že v-ak odstráni prvok z DOM, keď je podmienka nepravdivá, čo môže brániť optimálnemu výkonu. Prvok sa vykreslí až vtedy, keď sa podmienka stane pravdivou, a odstráni sa z modelu DOM, keď sa podmienka opäť stane nepravdivou.

Na druhej strane, ak sa stav pravdepodobne často mení, je lepšie použiť v-show smernice, ktorá zlepšuje výkon. To je preto, že v-show používa CSS na skrytie alebo zobrazenie prvku prepnutím vlastnosti zobrazenia CSS medzi none a block, čím sa prvok vždy vykreslí do DOM.

Podmienené vykresľovanie vo vašej aplikácii Vue je jednoduché

Naučili ste sa vykresľovať obsah podmienene v aplikáciách Vue pomocou príkazov v-if a v-show. Použitím týchto pokynov môžete rýchlo vykresliť obsah na základe rôznych podmienok, čo vám poskytne väčšiu kontrolu nad vzhľadom a správaním vašich komponentov Vue.