No último capítulo, aprendemos o que são as diretivas e para que elas servem. Neste capítulo, vamos aprender sobre as diretivas v-show, v-if e v-else, que são diretivas de condição.
Ahhh mas peraí, tem um vídeo show de bola sobre este capítulo meu jovem. 👇🏼👇🏼👇🏼
Tudo bem, você não curte vídeo né? Então vamos continuar por aqui mesmo hahaha
Para o bom entendimento dessas três diretivas vamos tomar como base o código abaixo. Perceba que a variável titulo declarada dentro de data está sendo utilizada dentro o h1.
<div id="#app">
<h1>{{ titulo }}</h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
titulo: 'Vue.js do jeito ninja',
},
});
</script>
Como o v-if funciona?
De uma forma simplificada, v-if vai adicionar/remover o elemento no seu HTML de acordo com o resultado da função ou variável que você passar. Por exemplo, se a variável for verdadeira, o elemento será adicionado e se a variável for falsa o elemento será removido.
Vamos então declarar uma variável mostrarTitulo só para testar este funcionamento.
<script>
var app = new Vue({
el: '#app',
data: {
titulo: 'Vue.js do jeito ninja',
mostrarTitulo: true,
},
});
</script>
Após isso é hora de usar finalmente a diretiva v-if lá no h1.
<div id="#app">
<h1 v-if="mostrarTitulo">{{ titulo }}</h1>
</div>
Agora para efeito de experimento, altere a variável mostrarTitulo, que está sendo declarada no data para false e veja o que acontece, o Vue.js vai remover o título do HTML imediatamente. Volte então para true e o título estará lá novamente.
Fantástico!
Como o v-show funciona?
O v-show é bem parecido com o v-if, mas aqui a função é mostrar ou esconder os elementos no HTML.
Vamos incrementar o nosso exemplo adicionando um parágrafo com a tag p e também uma nova variável mostrarParagrafo para controlar este elemento, ficando assim:
<div id="#app">
<h1 v-if="mostrarTitulo">
{{ titulo }}
</h1>
<p v-show="mostrarParagrafo">
{{ paragrafo }}
</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
titulo: 'Vue.js do jeito ninja',
paragrafo: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
mostrarTitulo: true,
mostrarParagrafo: true,
},
});
</script>
Agora, para efeito de experimento brinque com os valores das duas variáveis que criamos, mostrarTitulo e mostrarParagrafo e veja o que acontece.
Eles tem o mesmo comportamento 
Tem sim, mas há uma diferença. Abra seu código HTML e veja que quando você usa o v-if, o Vue.js adiciona/remove o elemento do seu código HTML e quando você usa o v-show, o Vue.js mostra/esconde o elemento usando CSS inline style="display: none".
Boooom hahaha legal não?
E o v-else como funciona?
Sabia que “else” em inglês significa “outro”? Essa dica já ajuda bastante a entender o tópico de agora. O v-else funciona exatamente igual a declaração if/else de qualquer linguagem de programação.
Vamos incrementar ainda mais nosso exemplo adicionando um objeto usuario dentro de data. Depois, vamos imprimir no nosso HTML todos os dados desse usuário conforme segue o código abaixo.
<div id="#app">
<h1 v-if="mostrarTitulo">
{{ titulo }}
</h1>
<p v-show="mostrarParagrafo">
{{ paragrafo }}
</p>
<div>
ID: {{ usuario.id }}, <br>
Nome: {{ usuario.nome }}, <br>
Profissão: {{ usuario.profissao }}, <br>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
titulo: 'Vue.js do jeito ninja',
paragrafo: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
mostrarTitulo: true,
mostrarParagrafo: true,
usuario: {
id: 1,
nome: 'Jon Snow',
profissao: 'Ator',
},
},
});
</script>
Agora vamos fazer uma declaração para este usuário utilizando o v-else. Vamos supor que SE o usuário não for id = 1, mostre uma mensagem dizendo Ops! Usuário não encontrado, só para efeito de teste mesmo.
Neste caso usaremos o v-if="usuario.id === 1" dentro da div e criaremos outra div para apresentar a mensagem acima usando o v-else.
<div v-if="usuario.id === 1">
ID: {{ usuario.id }}, <br>
Nome: {{ usuario.nome }}, <br>
Profissão: {{ usuario.profissao }}, <br>
</div>
<div v-else>
Ops! Usuário não encontrado
</div>
Agora brinque com os dados alterando o id do usuário para outro número, por exemplo 2 e veja que a mensagem vai aparecer.
Show de bola hein!
Então, recapitulando: o v-if serve adicionar/remover elementos do HTML, o v-show serve para mostrar/esconder elementos usando CSS style="display: none" e o v-else é como se fosse um plano B para caso nenhuma das condições anteriores seja satisfatória o código irá cair no else.
