პირობითი ჩვენება Vue-ში

შემდეგი დირექტივა, რომელსაც შევისწავლით, ეწოდება v-if. მისი საშუალებით შესაძლებელია ელემენტების ჩვენება ან დამალვა. როგორ მუშაობს ეს დირექტივა: პარამეტრად ის იღებს ობიექტის data ნებისმიერ თვისებას. თუ ამ თვისების მნიშვნელობაა true - მაშინ ელემენტი გამოჩნდება, ხოლო თუ false - მაშინ დაიმალება.

მოდით, მაგალითზე ვნახოთ. დავუშვათ, გვაქვს აბზაცი v-if ატრიბუტით. ამ ატრიბუტის მნიშვნელობად იყოს visible თვისება, აი ასე:

App.vue<template>
  <p v-if="visible">ტექსტი</p>
</template>

მოდით, ჩვენი თვისების მნიშვნელობა true-ზე დავაყენოთ. ამ შემთხვევაში აბზაცი გამოჩნდება:

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

ხოლო თუ visible მნიშვნელობად false დავაყენებთ, აბზაცი დაიმალება:

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