VueJS Attributes + Classes
Robog a Vue.js vonat megállíthatatlanul! Most az attribútumok manipulálását és az osztályok kezelését mutatja meg Gergő barátom ebben a pazar videóban.
Videós magyarázat
Forráskód a Github -on:
Attribute
Ezek gyakorlatilag a HTML elemek jellemzői, például title, id, stb. Úgy tudod
őket a Vue.js segítségével manipulálni, ha az attribútum neve elé írsz egy :
kettőspontot.
Nézzük a metódusokat.
<ul>
<li
v-for="item in items"
:title="item.label"
@click="togglePurchased(item)"
:class="{strikeout: item.purchased}"
>
{{ item.label }}
</li>
</ul>
A példában jól látszik, hogy kettő ilyen is van. Most csak az elsőt nézzük.
Tehát a title
értéke egy változóból jön item.label
, ami az adott sorhoz
között item
label
tulajdonsága, ami ugye egy string. Ha ez a string
változik, vele együtt változik a title
is, azaz itt egy adatkötésről van szó.
Class
De mi a helyzet az osztályokkal? A scenario az, hogy kattintunk az adott elemre,
ennek hatására megváltozik az osztálya és így más lesz a megjelenése. Ezt
szépen leírtam, de talán még érthetőbb lesz, ha megmutatom a kódokat.
Itt van a metódus:
togglePurchased(item) {
item.purchased = !item.purchased;
},
Ez csak annyit csinál, hogy negálja a kapott elem purchased
tulajdonságát.
Itt pedig a hozzá tartozó HTML:
<li
v-for="item in items"
:title="item.label"
@click="togglePurchased(item)"
:class="{strikeout: item.purchased}"
>
{{ item.label }}
</li>
Itt ha kattintasz, lefut a metódus, ami megváltoztatja a purchased
értékét. Ha
a purchased === true
akkor az elem hozzá lesz adva a strikeout
osztályhoz,
ellenkező esetben el lesz távolítva belőle.