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.
