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.