ობიექტის რეაქტიულობა CSS კლასებთან Vue-ში

CSS კლასების მქონე ობიექტი განკუთვნილია იმისთვის, რომ მოხერხებულად იყოს ელემენტებს რეაქტიულად მინიჭებული კლასები. მოდით ვნახოთ, როგორ კეთდება ეს. მაგალითად, გვქონდეს შემდეგი ობიექტი კლასებით:

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

მოდით, ეს ობიექტი მივაბათ თეგს:

<template>
	<p :class="styles">ტექსტი</p>
</template>

დაე, done კლასის არსებობამ გადახაზოს თეგის ტექსტი:

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

შევქმნათ ღილაკი, რომლის დაჭერაც შეცვლის სტილების ობიექტს, ჩართავს done კლასს:

<template>
	<button @click="setDone">დამალვა</button>
</template>

დავწეროთ შესაბამისი მეთოდი:

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

მოცემულია შემდეგი ობიექტი CSS კლასებით:

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

დაე, ამ კლასის არსებობამ დამალოს ელემენტი:

p.hidden {
	display: none;
}

მიუსადაგეთ კლასების ობიექტი რაიმე თეგს ტექსტით.

შექმენით ღილაკი, რომლის დაჭერაც გამოაჩენს ელემენტს.

შექმენით ღილაკი, რომლის დაჭერაც დამალავს ელემენტს.

შექმენით ღილაკი, რომლის დაჭერაც ჩართავს/გამორთავს ელემენტს (გამოაჩენს, თუ დამალულია; დამალავს, თუ ჩანს).