Alternando visibilidade com v-show

Olá, alunos! Bem-vindos à aula 4 de Diretivas Vue.js. Hoje, vamos aprender sobre a diretiva v-show e como usá-la para alternar a visibilidade de elementos.

O que é a diretiva v-show?

A diretiva v-show permite alternar a visibilidade de um elemento. Ela é semelhante à diretiva v-if, mas com uma diferença importante: a diretiva v-show não remove o elemento do DOM, apenas altera sua visibilidade.

Como usar a diretiva v-show?

A sintaxe básica da diretiva v-show é a seguinte:

<elemento v-show="condição">

Onde:

• elemento é o elemento cuja visibilidade você deseja alternar.
• condição é uma expressão JavaScript que determina se o elemento será visível.

Exemplo

Vamos ver um exemplo de como usar a diretiva v-show para alternar a visibilidade de um elemento:

<div v-show="isLogado">
  <h1>Olá, usuário!</h1>
</div>

No exemplo acima, o elemento div será visível somente se a propriedade isLogado for verdadeira.

Outros exemplos

Vamos ver alguns outros exemplos de como usar a diretiva v-show:

• Alterar a visibilidade de um elemento somente se o valor de uma propriedade for maior que um determinado valor:

<div v-show="idade > 18">
  <h1>Você é maior de idade.</h1>
</div>

• Alterar a visibilidade de um elemento somente se o usuário selecionar uma opção de um menu:

<div v-show="opcao === 'opção 1'">
  <h1>Você selecionou a opção 1.</h1>
</div>

Expressões JavaScript na diretiva v-show

Você pode usar expressões JavaScript na diretiva v-show para determinar se o elemento será visível.

Por exemplo, vamos ver um exemplo de como usar a diretiva v-show para alterar a visibilidade de um elemento somente se o valor atual do tempo for maior que 12h:

<div v-show="new Date().getHours() > 12">
  <h1>Boa tarde!</h1>
</div>

No exemplo acima, o elemento div será visível somente se o valor atual do tempo for maior que 12h.

Vantagens da diretiva v-show sobre a diretiva v-if

A diretiva v-show tem algumas vantagens sobre a diretiva v-if:

• A diretiva v-show não remove o elemento do DOM, apenas altera sua visibilidade. Isso pode melhorar o desempenho do seu aplicativo.
• A diretiva v-show pode ser usada para alternar a visibilidade de um elemento dinamicamente, sem precisar recriar o DOM.

Conclusão

A diretiva v-show é uma ferramenta útil que pode ser usada para alternar a visibilidade de elementos. Ela é uma boa alternativa à diretiva v-if em alguns casos.

Desafio

Aqui está um desafio para você:

• Crie um aplicativo Vue.js que exiba um botão de “like”. O botão deve ser visível somente se o usuário estiver logado.

Boa sorte!

Dica

Você pode usar a diretiva v-show para criar um modal que só é exibido quando o usuário clica em um botão.