Паказ па ўмове ў Vue

Наступная дырэктыва, якую мы вывучым, называецца v-if. З яе дапамогай можна паказваць ці хаваць элементы. Як гэтая дырэктыва працуе: параметрам яна прымае любы ўласцівасць аб'екта data. Калі гэтая ўласцівасць мае значэнне true - то элемент будзе паказаны, а калі false - то схаваны.

Давайце паглядзім на прыкладзе. Хай у нас ёсць абзац з атрыбутам v-if. Значэннем гэтага атрыбута хай служыць уласцівасць visible, вось так:

App.vue<template>
  <p v-if="visible">text</p>
</template>

Давайце ўсталюем значэнне нашай уласцівасці у true. У гэтым выпадку абзац будзе паказаны:

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

А вось калі visible паставіць у значэнне false, то абзац будзе схаваны:

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