Vue Academy · Oppitunti

Ehdot ja silmukat

Renderöikää ehdollisesti v-if:llä ja listoja v-for:llä

Oppitunti 2/313 vaihetta

Ehdot ja silmukat on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/3. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 3 oppituntia.

Ehdollinen renderöinti

Vuen avulla käyttöliittymän osia voi näyttää tai piilottaa datan perusteella.

v-if renderöi elementin ehdollisesti
v-else-if ja v-else ketjuttavat ehdot
v-show vaihtaa näkyvyyttä

v-if

v-if-direktiivi renderöi elementin vain, kun sen lausekkeen totuusarvo on tosi.

<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>

v-else-if ja v-else

Ketjuttakaa ehdot v-else-if- ja v-else-direktiivien avulla. Niiden on seurattava v-if-direktiiviä suoraan.

<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>

v-show

v-show renderöi elementin aina, mutta vaihtaa sen CSS:n display-ominaisuutta.

<div v-show="isVisible">
  This div stays in the DOM,
  only display:none toggles.
</div>

v-if ja v-show

Keskeinen ero:

v-if lisää elementin DOMiin tai poistaa sen DOMista kokonaan
v-show pitää elementin DOMissa ja vaihtaa vain display-ominaisuutta

Käyttäkää v-show-direktiiviä usein vaihdettaville asioille. Käyttäkää v-if-direktiiviä, kun ehto muuttuu harvoin tai elementti on raskas.

v-for taulukoille

v-for-direktiivi renderöi luettelon käymällä taulukon läpi.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->

v-for ja indeksi

v-for voi antaa käyttöön myös kunkin kohteen indeksin.

<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

:key-tunnisteen tärkeys

Antakaa v-for-direktiiviä käyttäessä aina yksilöllinen :key.

Se auttaa Vüeta seuraamaan kunkin solmun identiteettiä
Se mahdollistaa tehokkaat ja oikeat DOM-päivitykset
Käyttäkää vakaata yksilöllistä tunnistetta, älkää taulukon indeksiä, kun kohteiden järjestys voi muuttua

<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

Miksi :key on tärkeä

Ilman hyvää avainta Vue saattaa käyttää vääriä elementtejä uudelleen luettelon muuttuessa.

Lomakekenttiin voi jäädä väärä arvo
Animaatiot voivat toimia virheellisesti
Tila voi liittyä väärään riviin

Vakaa ja yksilöllinen avain estää nämä virheet.

v-for objekteille

v-for voi käydä läpi objektin ominaisuuksien arvot sekä tarvittaessa avaimen ja indeksin.

<li v-for="(value, key) in userProfile" :key="key">
  {{ key }}: {{ value }}
</li>

<!-- userProfile = { name: "Ada", age: 36 } -->

v-forin ja ehtojen yhdistäminen

Suodattakaa luettelo mieluummin lasketun ominaisuuden avulla kuin sijoittamalla v-if samalle elementille v-forin kanssa.

<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
  {{ task.title }}
</li>

<!-- activeTasks is a computed that
     returns only unfinished tasks -->

Pikatarkistus

Testatkaa, miten hyvin ymmärrätte ehdot ja silmukat.

Vastaa interaktiivisessa oppitunnissa

Kertaus: ehdot ja silmukat

Opitte ehdollisen ja luetteloiden renderöinnin:

v-if / v-else-if / v-else renderöivät ehdollisesti
v-show vaihtaa vain näkyvyyttä
v-for käy läpi taulukoita ja objekteja
Lisätkää aina yksilöllinen :key
Suodattakaa luettelot laskettujen ominaisuuksien avulla

Seuraavaksi käsitellään attribuuttien ja luokkien sidontaa.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Ehdot ja silmukat” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Ehdot ja silmukat”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”Ehdot ja silmukat”?

Renderöikää ehdollisesti v-if:llä ja listoja v-for:llä Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/3.

Kuinka kauan ”Ehdot ja silmukat”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Vue Academy