Object Reactivity with CSS Classes in Vue

The CSS class object is designed to make it easy to reactively assign classes to elements. Let's see how this is done. Let's say we have the following class object:

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

Let's bind this object to the tag:

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

Let the presence of the class done cross out the text of the tag:

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

Let's make a button that, when clicked, will change the object with styles, including the done class:

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

Let's write the corresponding method:

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

Given the following object with CSS classes:

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

Let the presence of this class hide the element:

p.hidden {
	display: none;
}

Apply an object with classes to some tag with text.

Make a button that when clicked will display the element.

Make a button that, when pressed, will hide the element.

Make a button that when clicked will toggle the element (show if hidden; hide if shown).