Vue.js é uma biblioteca fácil de aprender e acessível em que podemos começar a construir aplicativos da web com o conhecimento básico de desenvolvimento web. In Vue.js, os desenvolvedores adoram codificar e sentem liberdade ao desenvolver aplicativos.

Em qualquer aplicativo da web dinâmico, a renderização condicional é uma parte necessária. Vue.js fornece diferentes maneiras de renderização condicional, e podemos usar qualquer uma das seguintes maneiras que atendam ao nosso propósito:

• v-show
• v-if
• v-else

Neste artigo, tentaremos essas diretivas fornecidas pela Vue.js para renderização condicional e entendê-los de uma maneira melhor.

v-show

O v-show apenas esconde o elemento desativando sua visibilidade. Esconde o elemento se o valor da expressão ou variável passada não for verdadeiro.

Por exemplo:

Este parágrafo não está escondido

Este parágrafo está escondido

v-if

Por outro lado, v-if não oculta o elemento, mas também não renderiza nada até que o valor da expressão ou variável passada se torne verdadeiro.

Por exemplo:

Há um recurso adicional na diretiva v-if em comparação com a diretiva v-show. Podemos aplicá-lo ao bloco de modelo também se não quisermos renderizar nada entre esse bloco. Há um componente filho nesse ou muitos outros elementos.

Por exemplo:

v-else

Também podemos usar a diretiva v-else junto com a instrução v-if para renderizar condicionalmente entre qualquer um dos dois blocos. Mas, tendo em mente que o bloco v-else deve aparecer logo após o bloco v-if.

Por exemplo:

Este parágrafo será renderizado se 'isVar' se tornar verdadeiro

Caso contrário, este parágrafo será renderizado.

Podemos aplicar v-else no bloco de modelo também.

v-else-if

Assim como v-else, também podemos usar a diretiva v-else-if junto com a diretiva v-if.

Por exemplo:

v-if vs. v-show

Os v-if e v-show fazem a mesma tarefa. Ambos ocultam os elementos no DOM com base no valor verdadeiro ou falso da expressão passada, mas com uma diferença sutil de ocultar e não renderizar os elementos.

Se compararmos o tempo e o custo de processamento entre esses dois. O v-if custa mais durante o tempo de execução ou alternância, enquanto v-show custa mais no início da renderização. Portanto, seria aconselhável usar v-show quando alternar for o propósito. Caso contrário, v-if é o preferido.

Empacotando

Neste artigo, aprendemos como renderizar condicionalmente o DOM no Vue.js usando as diretivas v-if e v-else. Mostramos alguns exemplos e aprendemos sobre a diferença real entre as diretivas v-show e v-if. Se este artigo o ajuda a ter um melhor entendimento e conceitos, continue visitando linuxhint.com para esse conteúdo útil.