Pogojno upodabljanje je ključni del predlog v katerem koli jeziku. Odkrijte pristop Vue.js.

Vue.js je priljubljeno ogrodje JavaScript, ki olajša ustvarjanje dinamičnih spletnih aplikacij. Vue.js lahko upodablja vsebino na podlagi podatkov in dogodkov. To je še posebej uporabno za ustvarjanje odzivnih in interaktivnih uporabniških vmesnikov.

Naučite se, kaj so direktive Vue in kako jih uporabiti za doseganje pogojnega upodabljanja v Vue.js.

Kaj so direktive Vue?

Direktive Vue vam omogočajo, da izboljšate obnašanje elementov HTML v predlogah Vue.js tako, da jim dodate edinstvene atribute.

Direktive so temeljni del Vue.js in zagotavljajo preprost in zmogljiv način za manipulacijo Objektni model dokumenta (DOM), dodajte dinamično vedenje elementom in upravljajte podatke.

Poleg tega vam Vue.js omogoča ustvarjanje direktiv po meri, kar vam omogoča enostavno ustvarjanje funkcij za večkratno uporabo za aplikacije Vue.

Ogrodje Vue ima svoje direktive predpono z "v-" pred imenom direktive. Primeri pogosto uporabljenih direktiv v Vue vključujejo v-on, v-vezava, v-za, in v-če.

instagram viewer

Kaj je pogojno upodabljanje?

Pogojno upodabljanje vam omogoča, da prikažete ali skrijete elemente glede na pogoje, ki jih določite. Uporabite lahko na primer pogojno upodabljanje, da prikažete sporočilo uporabnikom le, če so vnesli veljaven e-poštni naslov.

V Vue.js lahko uporabite direktive, kot so v-če in v-oddaja da dosežete pogojno upodabljanje v vaši aplikaciji, ki se razlikuje od tistega, ki bi ga želeli pogojno upodabljanje vsebine v React.js.

Doseganje pogojnega upodabljanja z direktivo v-if

Podoben JavaScript če potem izjava, the v-če direktiva v Vue.js drži pogoj. Če ni izpolnjen, Vue.js ovrednoti naslednji pogoj, naveden v a v-drugo direktivo in tako nadaljuje, dokler ne izpolni pogoja ali ne ovrednoti vseh pogojev.

Ta direktiva vam omogoča pogojno upodobitev elementa na podlagi logične vrednosti. Prevajalnik Vue.js ne bo upodobil dela, če je njegova vrednost false.

Tukaj je primer pogojnega upodabljanja vsebine z v-če:

html>
<htmljezik="en">
<glavo>
<naslov>Dokumentnaslov>
<scenarijsrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarij>
glavo>
<telo>
<divid="aplikacija">
<h1v-če='false' >{{ sporočilo1 }}h1>
<h1v-drugo >{{ sporočilo2 }}h1>
div>
<scenarij>
 const app = Vue.createApp({
 podatki () {
 return {
 message1: 'To je vaša aplikacija Vue.',
 message2: 'Še ni aplikacija Vue.'
 }
 }
 })
 app.mount('#app')
scenarij>
telo>
html>

Zgornji blok kode prikazuje aplikacijo Vue, ustvarjeno z dodajanjem a Omrežje za dostavo vsebin (CDN) povezava do telesa vaše datoteke HTML. Direktiva v-if bo upodobila element h1 le, če je njegov pogoj resničen.

V aplikacijah Vue obstajajo situacije, ko morate upodobiti komponento na podlagi določenih dinamičnih meril. To je uporabno v scenarijih, kot je prikaz informacij samo, ko uporabnik klikne gumb ali prikaz indikatorja nalaganja, medtem ko se podatki nalagajo iz API-ja.

Na primer:

html>
<htmljezik="en">
<glavo>
<naslov>Aplikacija Vuenaslov>
<scenarijsrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarij>
glavo>
<telo>
<divid="aplikacija">
<divv-če="showUsers">
<ul>
<li>Uporabnik1li>
<li>Uporabnik2li>
ul>
div>
<gumbv-on: klik="toggleShowUsers()">
 Preklopi uporabnike
gumb>
<h1>{{ sporočilo }}h1>
div>
<scenarij>
 const app = Vue.createApp({
 podatki () {
 return {
 showUsers: res,
 sporočilo: 'To je vaša aplikacija Vue.'
 }
 },
 metode: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
scenarij>
telo>
html>

Zgornji blok kode uporablja v-če direktivo za pogojno upodobitev vsebine na podlagi vrednosti logične spremenljivke, showUsers.

The div element je prikazan, če je vrednost prav in skrito, če je lažno. S klikom na Preklopi uporabnike gumb sproži toggleShowUsers() način za spreminjanje vrednosti showUsers.

Ta primer uporablja tudi v-on direktivo za poslušanje dogodkov, kot je dogodek klika na gumb. Ponovno ocenjuje v-če direktivo, kadar koli je vrednost showUsers spremembe.

Doseganje pogojnega upodabljanja z direktivo v-show

The v-oddaja je še en način za pogojno prikazovanje ali skrivanje elementov v Vue.js. Podobno je v-če direktivo, saj lahko upodablja elemente na podlagi logičnega izraza. Vendar pa obstaja nekaj kritičnih razlik med obema direktivama.

The v-oddaja direktiva ne odstrani elementa iz DOM, ko je izraz ovrednoten kot false. Namesto tega uporablja CSS za preklop elementov zaslon premoženje med nič in njegovo prvotno vrednost.

To pomeni, da je element še vedno prisoten v DOM, vendar ni viden, ko je izraz napačen.

Tukaj je primer:

<telo>
<divid="aplikacija">
<divv-če="showUsers">
<ul>
<li>Uporabnik1li>
<li>Uporabnik2li>
ul>
div>
<gumbv-on: klik="toggleShowUsers()">
 Preklopi uporabnike
gumb>
<h1v-oddaja="showUsers">{{ sporočilo }}h1>
div>
<scenarij>
 const app = Vue.createApp({
 podatki () {
 return {
 showUsers: res,
 sporočilo: 'To so uporabniki aplikacije Vue'
 }
 },
 metode: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
scenarij>
telo>

Zgornji blok kode uporablja v-oddaja navodilo za prikaz sporočila, ki navaja:To so uporabniki aplikacije Vue' kadar koli kliknete preklopni gumb.

Izbira med v-if in v-show

Ko se odločate med uporabo v-če in v-oddaja navodil za pogojni prikaz ali skrivanje elementov v Vue.js, je treba upoštevati nekaj pomembnih dejavnikov.

Kadar se stanje redko spremeni, z uporabo v-če direktiva je dobra. To je zato, ker v-če odstrani element iz DOM, ko je pogoj napačen, kar lahko ovira optimalno delovanje. Element je upodobljen šele, ko pogoj postane resničen, in odstranjen iz DOM, ko pogoj spet postane false.

Po drugi strani, če je verjetno, da se bo stanje pogosto spreminjalo, je bolje uporabiti v-oddaja direktivo, ki izboljša delovanje. To je zato, ker v-oddaja uporablja CSS za skrivanje ali prikaz elementa tako, da preklopi lastnost prikaza CSS med none in block, pri čemer ostane element vedno upodobljen v DOM.

Pogojno upodabljanje v vaši aplikaciji Vue je preprosto

Naučili ste se pogojno upodabljati vsebino v aplikacijah Vue z direktivama v-if in v-show. Z uporabo teh direktiv lahko hitro upodabljate vsebino na podlagi različnih pogojev, kar vam daje večji nadzor nad videzom in obnašanjem vaših komponent Vue.