Objekti reaktiivsus CSS klassidega Vues

CSS klassidega objekt on mõeldud klasside mugavaks reaktiivseks määramiseks elementidele. Vaatame, kuidas seda tehakse. Oletame, et meil on järgmine klassidega objekt:

data() {
	return {
		styles: {
			done: false,
		},
	}
}

Seome selle objekti mingi tag'iga:

<template>
	<p :class="styles">text</p>
</template>

Oletame, et klassi done olek kriipsutab tag'i teksti läbi:

p.done {
	text-decoration: line-through;
}

Teeme nupu, mille vajutamine muudab stiilide objekti, lisades klassi done:

<template>
	<button @click="setDone">hide</button>
</template>

Kirjutame vastava meetodi:

methods: {
	setDone: function() {
		this.styles.done = true;
	}
}

Antud on järgmine objekt CSS klassidega:

data() {
	return {
		obj: {
			hidden: true,
		},
	}
}

Oletame, et selle klassi olek peidab elemendi:

p.hidden {
	display: none;
}

Rakendage klassidega objekt mõnele tag'ile koos tekstiga.

Tehke nupp, mille vajutamine näitab elementi.

Tehke nupp, mille vajutamine peidab elemendi.

Tehke nupp, mille vajutamine lülitab elemendi (näitab, kui on peidetud; peidab, kui on nähtav).