Uwiano wa Kitu na Madarasa ya CSS katika Vue

Kitu chenye madarasa ya CSS imekusudiwa ili iwe rahisi kubainisha madarasa kwa vipengele kwa njia inayobadilika. Wacha tuone jinsi hii inafanyika. Tuchukulie tuna kitu kifuatacho chenye madarasa:

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

Wacha tuunganishe kitu hiki kwa kitambulishi:

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

Tuchukulie kuwapo kwa darasa done kunavua mstari maandishi ya kitambulishi:

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

Wacha tutengeneze kifungo, kubonyeza ambacho atabadilisha kitu chenye mitindo, kuwasha darasa done:

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

Wacha tuandike mbinu inayofanana:

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

Kimetolewa kitu kifuatacho chenye madarasa ya CSS:

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

Tuchukulie kuwapo kwa darasa hili kinaficha kipengele:

p.hidden {
	display: none;
}

Tumia kitu chenye madarasa kwa kitambulishi chochote chenye maandishi.

Tengeneza kifungo, kubonyeza ambacho kitaonyesha kipengele.

Tengeneza kifungo, kubonyeza ambacho kitaficha kipengele.

Tengeneza kifungo, kubonyeza ambacho kitabadilisha hali ya kipengele (kuonyesha, kimefichika; kuficha, kimeonekana).