Tingimuslik renderdamine on igas keeles mallide koostamise oluline osa. Avastage Vue.js-i lähenemisviis.

Vue.js on populaarne JavaScripti raamistik, mis muudab dünaamiliste veebirakenduste loomise lihtsaks. Vue.js saab renderdada sisu andmete ja sündmuste põhjal. See on eriti kasulik tundlike ja interaktiivsete kasutajaliideste loomisel.

Siit saate teada, mis on Vue direktiivid ja kuidas neid Vue.js-is tingimusliku renderdamise saavutamiseks kasutada.

Mis on Vue direktiivid?

Vue direktiivid võimaldavad teil täiustada Vue.js mallide HTML-elementide käitumist, lisades neile ainulaadseid atribuute.

Direktiivid on Vue.js-i põhiosa ja pakuvad lihtsat ja võimsat viisi manipuleerimiseks Dokumendiobjekti mudel (DOM), lisada elementidele dünaamilist käitumist ja hallata andmeid.

Lisaks võimaldab Vue.js luua kohandatud direktiive, mis võimaldavad hõlpsasti luua Vue rakenduste jaoks korduvkasutatavaid funktsioone.

Vue raamistik lisab oma direktiividele eesliide "v-" enne direktiivi nimetust. Vue sageli kasutatavate direktiivide näited hõlmavad järgmist v-on, v-side, v-eestja v-kui.

instagram viewer

Mis on tingimuslik renderdamine?

Tingimuslik renderdamine võimaldab kuvada või peita elemente teie määratud tingimuste alusel. Näiteks saate kasutada tingimuslikku renderdamist, et näidata kasutajatele sõnumit ainult siis, kui nad on sisestanud kehtiva e-posti aadressi.

Vue.js-is saate kasutada selliseid direktiive nagu v-kui ja v-show et saavutada oma rakenduses tingimuslik renderdus, mis erineb teie kasutusviisist renderdada sisu tingimuslikult rakenduses React.js.

Tingimusliku renderdamise saavutamine v-if direktiiviga

Sarnane JavaScript kui...muidu avaldus, v-kui Vue.js-i direktiiv sisaldab tingimust. Kui see ei ole täidetud, hindab Vue.js järgmist punktis a täpsustatud tingimust v-muu ja jätkab seda seni, kuni see kas vastab tingimusele või hindab kõiki tingimusi.

See direktiiv võimaldab teil tingimuslikult renderdada elementi tõeväärtuse alusel. Vue.js-i kompilaator ei renderda osa, kui selle väärtus on vale.

Siin on näide sisu tingimisi renderdamisest v-kui:

html>
<htmllang="en">
<pea>
<pealkiri>Dokumentpealkiri>
<stsenaariumsrc=" https://unpkg.com/vue@3/dist/vue.global.js">stsenaarium>
pea>
<keha>
<divid="rakendus">
<h1v-kui='vale' >{{ sõnum1 }}h1>
<h1v-muu >{{ sõnum2 }}h1>
div>
<stsenaarium>
 const app = Vue.createApp({
 andmed () {
 return {
 message1: "See on teie Vue rakendus",
 sõnum2: "Pole veel Vue rakendus."
 }
 }
 })
 app.mount('#app')
stsenaarium>
keha>
html>

Ülaltoodud koodiplokk kujutab Vue rakendust, mis on loodud a lisamisega Sisu edastamise võrk (CDN) link oma HTML-faili kehasse. Direktiiv v-if renderdab elemendi h1 ainult siis, kui selle tingimus on tõene.

Vue rakendustes on olukordi, kus peate komponendi renderdama konkreetsete dünaamiliste kriteeriumide alusel. See on kasulik stsenaariumide puhul, nagu teabe kuvamine ainult siis, kui kasutaja klõpsab nuppu või laadimisnäidiku kuvamine andmete laadimise ajal API-st.

Näiteks:

html>
<htmllang="en">
<pea>
<pealkiri>Vue rakenduspealkiri>
<stsenaariumsrc=" https://unpkg.com/vue@3/dist/vue.global.js">stsenaarium>
pea>
<keha>
<divid="rakendus">
<divv-kui="showUsers">
<ul>
<li>Kasutaja 1li>
<li>Kasutaja2li>
ul>
div>
<nuppuv-on: klõpsake="toggleShowUsers()">
 Lülitage kasutajad sisse
nuppu>
<h1>{{ sõnum }}h1>
div>
<stsenaarium>
 const app = Vue.createApp({
 andmed () {
 return {
 showUsers: tõsi,
 teade: "See on teie Vue rakendus."
 }
 },
 meetodid: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
stsenaarium>
keha>
html>

Ülaltoodud koodiplokk kasutab v-kui käsk sisu tingimuslikuks renderdamiseks tõeväärtuse muutuja väärtuse alusel, showKasutajad.

The div element kuvatakse, kui väärtus on tõsi ja peidetud, kui see on vale. Klõpsates Lülitage kasutajad sisse nupp käivitab toggleShowUsers() meetod väärtuse muutmiseks showKasutajad.

See näide kasutab ka v-on käsk sündmuste, näiteks nupul klõpsamise kuulamiseks. See hindab uuesti v-kui direktiiv alati, kui väärtus showKasutajad muudatusi.

Tingimusliku renderdamise saavutamine v-show direktiiviga

The v-show direktiiv on veel üks viis Vue.js-i elementide tingimuslikuks kuvamiseks või peitmiseks. See on sarnane v-kui direktiiv, kuna see suudab elemente renderdada Boole'i ​​avaldise alusel. Siiski on nende kahe direktiivi vahel mõned olulised erinevused.

The v-show direktiiv ei eemalda elementi DOM-ist, kui avaldis on väär. Selle asemel kasutab see elemendi vahetamiseks CSS-i kuva vara vahel mitte ühtegi ja selle algne väärtus.

See tähendab, et element on endiselt DOM-is olemas, kuid pole nähtav, kui avaldis on väär.

Siin on näide:

<keha>
<divid="rakendus">
<divv-kui="showUsers">
<ul>
<li>Kasutaja 1li>
<li>Kasutaja2li>
ul>
div>
<nuppuv-on: klõpsake="toggleShowUsers()">
 Lülitage kasutajad sisse
nuppu>
<h1v-show="showUsers">{{ sõnum }}h1>
div>
<stsenaarium>
 const app = Vue.createApp({
 andmed () {
 return {
 showUsers: tõsi,
 teade: "Need on Vue rakenduse kasutajad"
 }
 },
 meetodid: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
stsenaarium>
keha>

Ülaltoodud koodiplokk kasutab v-show käsk, et kuvada teade "Need on Vue rakenduse kasutajad igal ajal, kui klõpsate lülitusnuppu.

V-if ja v-show vahel valimine

Kui otsustate selle kasutamise vahel v-kui ja v-show käskkirjad Vue.js-i elementide tingimuslikuks kuvamiseks või peitmiseks, tuleb arvestada mõne olulise teguriga.

Kui seisund muutub harva, kasutage v-kui direktiiv on hea. See on sellepärast, et v-kui eemaldab elemendi DOM-ist, kui tingimus on vale, mis võib takistada optimaalset jõudlust. Element renderdatakse alles siis, kui tingimus muutub tõeseks ja eemaldatakse DOM-ist, kui tingimus muutub uuesti vääraks.

Teisest küljest, kui seisund tõenäoliselt sageli muutub, on parem kasutada v-show direktiiv, mis parandab jõudlust. See on sellepärast, et v-show kasutab CSS-i elemendi peitmiseks või kuvamiseks, lülitades CSS-i kuvamise atribuudi None ja block vahel, jättes elemendi alati DOM-i renderdatuks.

Tingimuslik renderdamine teie Vue rakenduses on tehtud lihtsaks

Olete õppinud Vue rakendustes sisu tingimuslikult renderdama v-if ja v-show direktiividega. Neid juhiseid kasutades saate sisu kiiresti erinevatel tingimustel renderdada, andes teile suurema kontrolli oma Vue komponentide välimuse ja käitumise üle.