Afișare condiționată în Vue

Următoarea directivă pe care o vom studia se numește v-if. Cu ajutorul ei se pot afișa sau ascunde elemente. Cum funcționează această directivă: ca parametru primește orice proprietate a obiectului data. Dacă această proprietate are valoarea true - atunci elementul va fi afișat, iar dacă false - atunci va fi ascuns.

Să ne uităm la un exemplu. Să presupunem că avem un paragraf cu atributul v-if. Valoarea acestui atribut să fie proprietatea visible, astfel:

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

Să setăm valoarea proprietății noastre la true. În acest caz paragraful va fi afișat:

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

Iar dacă visible este setat la valoarea false, atunci paragraful va fi ascuns:

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