Vuedə şərti göstərmə

Öyrənəcəyimiz növbəti direktiv v-if adlanır. Onun köməyi ilə elementləri göstərmək və ya gizlətmək olar. Bu direktiv necə işləyir: parametr kimi o, data obyektinin istənilən xassəsini qəbul edir. Əgər bu xassə true dəyərinə malikdirsə - element göstəriləcək, əgər false olarsa - gizlədiləcək.

Gəlin nümunəyə baxaq. Tutaq ki, v-if atributu olan bir abzasımız var. Bu atributun dəyəri visible xassəsi olsun, bunun kimi:

App.vue<template>
  <p v-if="visible">mətn</p>
</template>

Gəlin xassəmizin dəyərini true təyin edək. Bu halda abzas göstəriləcək:

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

Amma əgər visible false dəyərinə qoyularsa, onda abzas gizlədiləcək:

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