Vue.js: Diretivas condicionais
Neste artigo veremos como utilizar as diretivas v-if e v-show do framework Vue.js para exibir um determinado conteúdo apenas se uma condição for atendida.
Motivação
Diretivas, no Vue.js, permitem adicionar a tags HTML funcionalidades adicionais. Assim, é possível ligar essas tags a dados e métodos definidos via JavaScript. A diretiva v-model, por exemplo, é utilizada para ligar um elemento da página, como um input, a uma propriedade no script, habilitando o recurso de two-way data binding.
Dentre as várias diretivas disponíveis no framework, nesse artigo nos concentraremos na v-if e na v-show, por meio das quais conseguimos condicionar a exibição de elementos na página a variáveis e expressões definidas em JavaScript.
A diretiva v-if
A diretiva v-if, quando aplicada a determinado elemento no HTML, faz com que ele seja adicionado à página apenas se uma condição for atendida. Caso o valor avaliado seja falso, o elemento é removido do documento. Na Listagem 1 temos um exemplo de uso dessa diretiva.
Observação: o código a seguir representa o conteúdo da tag <body> de um documento no qual estamos utilizando o Vue.js.
Fim do trecho gratuito • continue abaixo
CONTEÚDO EXCLUSIVO
Desbloqueie toda a DevMedia
-
+2000 artigos e vídeos
-
+40 trilhas sobre Front-end, Back-end, IA e muito mais
-
+5000 exercícios práticos
-
Mentorias ao vivo individuais
Confira outros conteúdos:
Por
Joel
Em 2017