Պայմանով ցուցադրումը 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,
  }
}