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:

Github repo

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.

Folytatása következik ...

Vue.js Methods - If - Else Vue.js Computed