Conditional Display in Vue

The next directive we'll learn is called v-if. It allows you to show or hide elements. How this directive works: it takes any property of the data object as a parameter. If this property has a value of true, the element will be shown, and if false, it will be hidden.

Let's look at an example. Let's say we have a paragraph with the attribute v-if. Let the value of this attribute be the property visible, like this:

<template>
	<p v-if="visible">text</p>
</template>

Let's set our property value to true. In this case, the paragraph will be shown:

data() {
	return {
		visible: true,
	}
}

But if visible is set to false, the paragraph will be hidden:

data() {
	return {
		visible: false,
	}
}

Let data store the property visible. Let's also have two paragraphs. Make the first paragraph be shown on the screen if the property visible is true, and make the second paragraph be shown if the property visible is false.