Kā ieviest nosacījumu renderēšanu Vue.js

Vue.js ir populārs JavaScript ietvars, kas atvieglo dinamisku tīmekļa lietojumprogrammu izveidi. Vue.js var renderēt saturu, pamatojoties uz datiem un notikumiem. Tas ir īpaši noderīgi, lai izveidotu atsaucīgas un interaktīvas lietotāja saskarnes.

Uzziniet, kas ir Vue direktīvas un kā tās izmantot, lai pakalpojumā Vue.js nodrošinātu nosacījumu renderēšanu.

Kas ir Vue direktīvas?

Vue direktīvas ļauj uzlabot HTML elementu darbību Vue.js veidnēs, pievienojot tiem unikālus atribūtus.

Direktīvas ir būtiska Vue.js daļa un nodrošina vienkāršu un efektīvu veidu, kā manipulēt ar Dokumenta objekta modelis (DOM), pievienojiet elementiem dinamisku darbību un pārvaldiet datus.

Turklāt Vue.js ļauj izveidot pielāgotas direktīvas, ļaujot Vue lietotnēm viegli izveidot atkārtoti lietojamas funkcijas.

Vue ietvars pievieno savas direktīvas ar "v-" pirms direktīvas nosaukuma. Vue bieži lietoto direktīvu piemēri ietver v-on, v-saiste, v-par, un v-ja.

Kas ir nosacījuma renderēšana?

Nosacītā renderēšana ļauj parādīt vai paslēpt elementus, pamatojoties uz jūsu norādītajiem nosacījumiem. Piemēram, varat izmantot nosacījumu renderēšanu, lai rādītu ziņojumu lietotājiem tikai tad, ja viņi ir ievadījuši derīgu e-pasta adresi.

Vietnē Vue.js varat izmantot tādas direktīvas kā v-ja un v-show lai savā lietojumprogrammā panāktu nosacījumu renderēšanu, kas atšķiras no tā, kā jūs to darītu atveidot saturu nosacīti React.js.

Nosacījuma atveidošanas sasniegšana ar v-ja direktīvu

Līdzīgs JavaScript ja...citādi paziņojums, apgalvojums, v-ja direktīvai Vue.js ir nosacījums. Ja tas nav izpildīts, Vue.js novērtē tālāk norādīto nosacījumu, kas norādīts a v-cits direktīvu un turpina to darīt, līdz tā atbilst kādam nosacījumam vai novērtē visus nosacījumus.

Šī direktīva ļauj nosacīti renderēt elementu, pamatojoties uz Būla vērtību. Vue.js kompilators neatveidos daļu, ja tās vērtība ir nepatiesa.

Šeit ir piemērs satura renderēšanai nosacīti ar v-ja:

html>
<htmllang="lv">
<galvu>
<virsraksts>Dokumentsvirsraksts>
<skriptssrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripts>
galvu>
<ķermeni>
<divid="lietotne">
<h1v-ja='nepatiess' >{{ ziņa1 }}h1>
<h1v-cits >{{ ziņa2 }}h1>
div>
<skripts>
 const app = Vue.createApp({
 dati () {
 return {
 message1: "Šī ir jūsu Vue lietotne".
 message2: "Vēl nav Vue lietotne."
 }
 }
 })
 app.mount('#app')
skripts>
ķermeni>
html>

Iepriekš redzamajā koda blokā ir attēlota Vue lietotne, kas izveidota, pievienojot a Satura piegādes tīkls (CDN) saiti uz HTML faila pamattekstu. V-if direktīva atveidos h1 elementu tikai tad, ja tā nosacījums ir patiess.

Vue lietotnēs ir situācijas, kad jums ir jāatveido komponents, pamatojoties uz konkrētiem dinamiskiem kritērijiem. Tas ir noderīgi tādos gadījumos kā informācijas parādīšana tikai tad, kad lietotājs noklikšķina uz pogas vai tiek rādīts ielādes indikators, kamēr dati tiek ielādēti no API.

Piemēram:

html>
<htmllang="lv">
<galvu>
<virsraksts>Vue lietotnevirsraksts>
<skriptssrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripts>
galvu>
<ķermeni>
<divid="lietotne">
<divv-ja="showUsers">
<ul>
<li>Lietotājs1li>
<li>Lietotājs2li>
ul>
div>
<poguv-on: noklikšķiniet="toggleShowUsers()">
 Pārslēgt lietotājus
pogu>
<h1>{{ ziņa }}h1>
div>
<skripts>
 const app = Vue.createApp({
 dati () {
 return {
 showUsers: taisnība,
 ziņojums: "Šī ir jūsu Vue lietotne."
 }
 },
 metodes: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
skripts>
ķermeni>
html>

Iepriekš minētais koda bloks izmanto v-ja direktīva, lai nosacīti renderētu saturu, pamatojoties uz Būla mainīgā vērtību, ShowUsers.

The div elements tiek parādīts, ja vērtība ir taisnība un slēpta, ja tā ir viltus. Noklikšķinot uz Pārslēgt lietotājus poga aktivizē toggleShowUsers() metode, kā mainīt vērtību ShowUsers.

Šajā piemērā tiek izmantots arī v-on direktīvu, lai noklausītos notikumus, piemēram, klikšķi uz pogas. Tas atkārtoti novērtē v-ja direktīva, kad vien vērtība ShowUsers izmaiņas.

Nosacījuma renderēšanas sasniegšana ar v-show direktīvu

The v-show direktīva ir vēl viens veids, kā nosacīti parādīt vai paslēpt elementus Vue.js. Tas ir līdzīgs v-ja direktīvu, jo tā var atveidot elementus, pamatojoties uz Būla izteiksmi. Tomēr starp abām direktīvām ir dažas būtiskas atšķirības.

The v-show direktīva nenoņem elementu no DOM, kad izteiksme tiek novērtēta kā false. Tā vietā tā izmanto CSS, lai pārslēgtu elementu displejs īpašums starp neviens un tā sākotnējā vērtība.

Tas nozīmē, ka elements joprojām atrodas DOM, bet nav redzams, ja izteiksme ir nepatiesa.

Šeit ir piemērs:

<ķermeni>
<divid="lietotne">
<divv-ja="showUsers">
<ul>
<li>Lietotājs1li>
<li>Lietotājs2li>
ul>
div>
<poguv-on: noklikšķiniet="toggleShowUsers()">
 Pārslēgt lietotājus
pogu>
<h1v-show="showUsers">{{ ziņa }}h1>
div>
<skripts>
 const app = Vue.createApp({
 dati () {
 return {
 showUsers: taisnība,
 ziņojums: "Tie ir lietotnes Vue lietotāji"
 }
 },
 metodes: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
skripts>
ķermeni>

Iepriekš minētais koda bloks izmanto v-show norādījums, lai parādītu ziņojumu, kurā teikts: "Šie ir lietotnes Vue lietotāji ikreiz, kad noklikšķināt uz pārslēgšanas pogas.

Izvēle starp v-if un v-show

Izlemjot starp lietošanu v-ja un v-show norādījumus, lai Vue.js elementus nosacīti parādītu vai slēptu, ir jāņem vērā daži svarīgi faktori.

Ja stāvoklis mainās reti, izmantojot v-ja direktīva ir laba. Tas ir tāpēc, ka v-ja noņem elementu no DOM, ja nosacījums ir nepatiess, kas var kavēt optimālu veiktspēju. Elements tiek renderēts tikai tad, kad nosacījums kļūst patiess, un tiek noņemts no DOM, kad nosacījums atkal kļūst nepatiess.

No otras puses, ja stāvoklis, iespējams, bieži mainīsies, labāk ir izmantot v-show direktīva, kas uzlabo veiktspēju. Tas ir tāpēc, ka v-show izmanto CSS, lai paslēptu vai parādītu elementu, pārslēdzot CSS displeja rekvizītu starp None un block, atstājot elementu vienmēr renderētu DOM.

Nosacītā renderēšana jūsu Vue lietotnē ir vienkārša

Jūs esat iemācījies Vue lietotnēs atveidot saturu nosacīti, izmantojot direktīvu v-if un v-show. Izmantojot šīs direktīvas, jūs varat ātri renderēt saturu, pamatojoties uz dažādiem nosacījumiem, sniedzot jums lielāku kontroli pār savu Vue komponentu izskatu un darbību.