Renderização Condicional em Vue

A próxima diretiva que estudaremos é chamada de v-if. Com ela, é possível mostrar ou ocultar elementos. Como essa diretiva funciona: ela recebe como parâmetro qualquer propriedade do objeto data. Se essa propriedade tiver o valor true - então o elemento será exibido, e se for false - então será ocultado.

Vamos ver um exemplo. Suponha que temos um parágrafo com o atributo v-if. Seja a propriedade visible o valor desse atributo, assim:

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

Vamos definir o valor da nossa propriedade como true. Neste caso, o parágrafo será exibido:

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

Mas se visible for definido como false, então o parágrafo será ocultado:

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