Toggling Elements in Vue

Let's now make a button that will toggle a paragraph, that is, show it on the first click, and hide it on the second click. To do this, we will call the toggle method when clicking on the button:

<template>
	<button @click="toggle">toggle</button>
	<p v-if="visible">text</p>
</template>

In the method code, you will need to take the value of the property visible and invert it to its opposite:

toggle: function() {
	this.visible = !this.visible;
}

Given three paragraphs and three buttons, make each button toggle its own paragraph.