Условни приказ у 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,
  }
}