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:

App.vue<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:

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