ელემენტების ჩართვა/გამორთვა Vue-ში

ახლა მოდით გავაკეთოთ ღილაკი, რომელიც აკონტროლებს აბზაცის ჩართვას/გამორთვას, ანუ პირველ დაწკაპუნებაზე გამოაჩენს მას, ხოლო მეორე დაწკაპუნებაზე - დამალავს. ამისთვის ღილაკზე დაწკაპუნებისას გამოვიძახებთ მეთოდს toggle:

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

მეთოდის კოდში საჭირო იქნება ავიღოთ თვისების visible მნიშვნელობა და გადავაბრუნოთ იგი მის საპირისპიროდ:

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