Kako implementirati uvjetno iscrtavanje u Vue.js

Vue.js je popularan JavaScript okvir koji olakšava izradu dinamičkih web aplikacija. Vue.js može prikazati sadržaj na temelju podataka i događaja. Ovo je osobito korisno za stvaranje responzivnih i interaktivnih korisničkih sučelja.

Naučite što su Vue direktive i kako ih koristiti za postizanje uvjetnog renderiranja u Vue.js.

Što su Vue direktive?

Vue direktive vam omogućuju da poboljšate ponašanje HTML elemenata u Vue.js predlošcima dodavanjem jedinstvenih atributa u njih.

Direktive su temeljni dio Vue.js i pružaju jednostavan i moćan način za manipuliranje Objektni model dokumenta (DOM), dodajte dinamičko ponašanje elementima i upravljajte podacima.

Osim toga, Vue.js vam omogućuje stvaranje prilagođenih direktiva, omogućujući vam da jednostavno izradite funkcije za višekratnu upotrebu za Vue aplikacije.

Okvir Vue svojim direktivama stavlja prefiks "v-" ispred naziva direktive. Primjeri često korištenih direktiva u Vueu uključuju v-na, v-vezivanje, v-za, i v-ako.

Što je uvjetno iscrtavanje?

Uvjetno iscrtavanje omogućuje vam da prikažete ili sakrijete elemente na temelju uvjeta koje odredite. Na primjer, možete koristiti uvjetno prikazivanje da biste korisnicima prikazali poruku samo ako su unijeli valjanu adresu e-pošte.

U Vue.js možete koristiti direktive kao što su v-ako i v-emisija kako biste postigli uvjetno prikazivanje u svojoj aplikaciji, različito od onoga kako biste renderirati sadržaj uvjetno u React.js.

Postizanje uvjetnog prikazivanja s v-if direktivom

Slično JavaScript ako...drugo izjava, the v-ako direktiva u Vue.js drži uvjet. Ako nije zadovoljen, Vue.js procjenjuje sljedeći uvjet naveden u a v-drugo direktivu i nastavlja tako dok ne ispuni uvjet ili ne ocijeni sve uvjete.

Ova vam direktiva omogućuje uvjetno prikazivanje elementa na temelju Booleove vrijednosti. Kompajler Vue.js neće prikazati dio ako je njegova vrijednost lažna.

Evo primjera uvjetnog prikazivanja sadržaja s v-ako:

html>
<htmljezik="en">
<glava>
<titula>Dokumenttitula>
<skriptasrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripta>
glava>
<tijelo>
<diviskaznica="aplikacija">
<h1v-ako='lažan' >{{ poruka1 }}h1>
<h1v-drugo >{{ poruka2 }}h1>
div>
<skripta>
 const app = Vue.createApp({
 podaci () {
 povratak {
 message1: 'Ovo je vaša Vue aplikacija.',
 message2: 'Još nije aplikacija Vue.'
 }
 }
 })
 app.mount('#app')
skripta>
tijelo>
html>

Gornji blok koda prikazuje aplikaciju Vue stvorenu dodavanjem a Mreža za isporuku sadržaja (CDN) vezu na tijelo vaše HTML datoteke. Direktiva v-if će prikazati element h1 samo ako je njegov uvjet istinit.

U Vue aplikacijama postoje situacije u kojima trebate renderirati komponentu na temelju specifičnih dinamičkih kriterija. Ovo je korisno u scenarijima kao što je prikazivanje informacija samo kada korisnik klikne gumb ili prikazivanje indikatora učitavanja dok se podaci učitavaju iz API-ja.

Na primjer:

html>
<htmljezik="en">
<glava>
<titula>Aplikacija Vuetitula>
<skriptasrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripta>
glava>
<tijelo>
<diviskaznica="aplikacija">
<divv-ako="showUsers">
<ul>
<li>Korisnik1li>
<li>Korisnik2li>
ul>
div>
<dugmev-on: klik="toggleShowUsers()">
 Uključi/isključi korisnike
dugme>
<h1>{{ poruka }}h1>
div>
<skripta>
 const app = Vue.createApp({
 podaci () {
 povratak {
 showUsers: istina,
 poruka: 'Ovo je vaša aplikacija Vue.'
 }
 },
 metode: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
skripta>
tijelo>
html>

Gornji blok koda koristi v-ako direktiva za uvjetno prikazivanje sadržaja na temelju vrijednosti Booleove varijable, showUsers.

The div element se prikazuje ako je vrijednost pravi a skriveno ako jest lažno. Klikom na Uključi/isključi korisnike gumb pokreće prebaciPrikažiKorisnike() metoda za promjenu vrijednosti showUsers.

Ovaj primjer također koristi v-na direktiva za slušanje događaja, kao što je događaj klika na gumb. Ponovno procjenjuje v-ako direktiva kad god je vrijednost showUsers promjene.

Postizanje uvjetnog prikazivanja s v-show direktivom

The v-emisija direktiva je još jedan način za uvjetno prikazivanje ili skrivanje elemenata u Vue.js. Slično je v-ako direktivu utoliko što može prikazati elemente na temelju Booleovog izraza. Međutim, postoje neke kritične razlike između dviju direktiva.

The v-emisija direktiva ne uklanja element iz DOM-a kada se izraz ocijeni kao netočan. Umjesto toga, koristi CSS za prebacivanje elemenata prikaz vlasništvo između nikakav i njegovu izvornu vrijednost.

To znači da je element i dalje prisutan u DOM-u, ali nije vidljiv kada je izraz lažan.

Evo primjera:

<tijelo>
<diviskaznica="aplikacija">
<divv-ako="showUsers">
<ul>
<li>Korisnik1li>
<li>Korisnik2li>
ul>
div>
<dugmev-on: klik="toggleShowUsers()">
 Uključi/isključi korisnike
dugme>
<h1v-emisija="showUsers">{{ poruka }}h1>
div>
<skripta>
 const app = Vue.createApp({
 podaci () {
 povratak {
 showUsers: istina,
 poruka: 'Ovo su korisnici aplikacije Vue'
 }
 },
 metode: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
skripta>
tijelo>

Gornji blok koda koristi v-emisija direktiva za prikaz poruke koja kaže, 'Ovo su korisnici aplikacije Vue' kad god kliknete gumb za prebacivanje.

Odabir između v-if i v-show

Kada odlučujete između korištenja v-ako i v-emisija upute za uvjetno prikazivanje ili skrivanje elemenata u Vue.js, postoje neki važni čimbenici koje treba uzeti u obzir.

Kada se stanje rijetko mijenja, korištenjem v-ako direktiva je dobra. Ovo je zbog v-ako uklanja element iz DOM-a kada je uvjet lažan, što može spriječiti optimalnu izvedbu. Element se prikazuje samo kada uvjet postane istinit i uklanja se iz DOM-a kada uvjet ponovno postane lažan.

S druge strane, ako je vjerojatno da će se stanje često mijenjati, bolje je koristiti v-emisija direktive, koja poboljšava izvedbu. Ovo je zbog v-emisija koristi CSS za skrivanje ili prikazivanje elementa prebacivanjem svojstva CSS prikaza između none i block, ostavljajući element uvijek prikazan u DOM-u.

Uvjetno iscrtavanje u vašoj aplikaciji Vue postalo je jednostavno

Naučili ste uvjetno prikazati sadržaj u Vue aplikacijama s v-if i v-show direktivama. Upotrebom ovih direktiva možete brzo prikazati sadržaj na temelju različitih uvjeta, dajući vam veću kontrolu nad izgledom i ponašanjem vaših Vue komponenti.