Prikaz uslovno u Vue

Sledeća direktiva koju ćemo izučiti zove se v-if. Pomoću nje možemo prikazati ili sakriti elemente. Kako ova direktiva radi: kao parametar prihvata bilo koje svojstvo objekta data. Ako ovo svojstvo ima vrednost true - onda će element biti prikazan, a ako je false - onda će biti sakriven.

Hajde da pogledamo primer. Neka imamo paragraf sa atributom v-if. Neka vrednost ovog atributa bude svojstvo visible, ovako:

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

Hajde da postavimo vrednost našeg svojstva na true. U ovom slučaju paragraf će biti prikazan:

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

A ako se visible postavi na vrednost false, onda će paragraf biti sakriven:

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