Attribuutti- ja luokkasidonnat
Sitokaa attribuutteja, luokkia ja tyylejä dynaamisesti
Attribuutti- ja luokkasidonnat on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
Luokkien ja tyylien sidonta
Yleinen tarve on muuttaa elementin luokkaa tai tyyliä tilan perusteella.
Vue käsittelee :class- ja :style-sidontoja erityisellä tavalla, joten niille voi välittää merkkijonojen lisäksi objekteja ja taulukoita.
:class-objektisyntaksi
Välittäkää objekti kohteelle :class. Avaimet ovat luokkien nimiä, ja totuusarvoltaan tosi olevat arvot lisäävät niitä vastaavat luokat.
<div :class="{ active: isActive, disabled: isDisabled }">
Status box
</div>
<!-- if isActive is true, the "active"
class is applied -->Staattisten ja dynaamisten luokkien yhdistäminen
Staattinen class-attribuutti ja dynaaminen :class yhdistetään.
<div class="card" :class="{ highlighted: isSelected }">
Always has "card";
adds "highlighted" when selected.
</div>:class-taulukkosyntaksi
Välittämällä taulukon voitte ottaa käyttöön useita luokkia.
<div :class="[baseClass, themeClass]">Box</div>
<!-- data:
baseClass = "panel"
themeClass = "dark" -->Ehdolliset lausekkeet taulukossa
Voitte yhdistää ehdollisia lausekkeita taulukon sisällä.
<div :class="[isActive ? 'active' : '', errorClass]">
...
</div>
<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
...
</div>Sisäisten tyylien sitominen
:style-direktiivi sitoo sisäiset tyylit olion avulla.
Käyttäkää camelCase-ominaisuusnimiä, kuten fontSize.
<p :style="{ color: textColor, fontSize: size + 'px' }">
Styled text
</p>
<!-- data: textColor = "red", size = 18 -->:style taulukon kanssa
Voitte välittää taulukon tyyliolioita, jolloin Vue yhdistää ne.
<div :style="[baseStyles, overrideStyles]">
Merged styles
</div>Etuliitteiden automaattinen lisäys
Kun CSS-ominaisuus tarvitsee selaimen toimittajakohtaisia etuliitteitä, Vue voi lisätä ne automaattisesti selaimen tukemissa tilanteissa.
- Kirjoitatte vakiomuotoisen ominaisuuden
- Vue käyttää tarvittaessa oikeaa etuliitettä
Näin tyylisidonnat pysyvät selkeinä.
Dynaaminen attribuutin sitominen
Mikä tahansa attribuutti voidaan sitoa dynaamisesti :attr-syntaksilla.
<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>Totuusarvoattribuutit
Totuusarvoattribuuttien, kuten disabled, kohdalla Vue lisää attribuutin vain, kun arvo on totuusarvoltaan tosi.
<button :disabled="isSubmitting">Submit</button>
<!-- if isSubmitting is false,
the disabled attribute is removed -->Useiden luokkien ehdollinen sitominen
Käytännön esimerkki useiden luokkien ottamisesta käyttöön tai poistamisesta käytöstä samanaikaisesti.
<li
class="todo"
:class="{
done: task.completed,
overdue: task.isLate,
priority: task.urgent
}"
>
{{ task.title }}
</li>Pikatesti
Testatkaa ymmärrystänne luokka- ja tyylisidonnasta.
Kertaus: attribuuttien ja luokkien sidonnat
Opitte käyttämään dynaamisia sidontoja:
- :class-oliosyntaksi ottaa luokat käyttöön tai poistaa ne käytöstä totuusarvon perusteella
- :class-taulukkosyntaksi käyttää luettelon luokkia
- :style sitoo sisäiset tyylit camelCase-avaimilla
- Mikä tahansa attribuutti voidaan sitoa :attr-syntaksilla
- Totuusarvoattribuutit näkyvät vain, kun arvo on totuusarvoltaan tosi
Seuraavaksi: komponenttien perusteet ja viestintä.
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
Usein kysytyt kysymykset
Onko oppitunti ”Attribuutti- ja luokkasidonnat” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Attribuutti- ja luokkasidonnat”. 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 ”Attribuutti- ja luokkasidonnat”?
Sitokaa attribuutteja, luokkia ja tyylejä dynaamisesti 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 3/3.
Kuinka kauan ”Attribuutti- ja luokkasidonnat”-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
- Interpolaatio ja direktiivit
- Ehdot ja silmukat
- Attribuutti- ja luokkasidonnat