Vue.JS Renderização Condicional
Vue.JS é uma biblioteca fácil de aprender e acessível para que possamos começar a criar aplicativos da web com o conhecimento básico do desenvolvimento da Web. Em vue.JS, desenvolvedores adoram codificar e sentir liberdade ao desenvolver aplicativos.
Em qualquer aplicativo dinâmico da Web, a renderização condicional é uma parte necessária. Vue.O JS fornece maneiras diferentes de renderização condicional, e podemos usar qualquer uma das seguintes maneiras que se adequam ao nosso objetivo:
- 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 S-Show apenas esconde o elemento desativando sua visibilidade. Ele esconde o elemento se o valor da expressão ou variável passada não for verdade.
Por exemplo:
Este parágrafo não está escondido
Este parágrafo está escondido
v-if
Por outro lado, o V-IF não esconde o elemento, mas também não torna nada até que o valor da expressão ou variável passada se torne verdade.
Por exemplo:
Este é um parágrafo
Existe 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 aquele bloco. Ou há um componente infantil nesse ou muitos outros elementos.
Por exemplo:
Este é um título
Este é um parágrafo
V-Else
Também podemos usar a diretiva V-ELSE, juntamente com a declaração V-IF, a fim de renderizar condicionalmente entre qualquer um dos dois blocos. Mas, tendo em mente que o bloco V-ELSE deve ter que aparecer logo após o bloco V-IF.
Por exemplo:
Este parágrafo renderá se 'Isvar' se tornar verdadeiro
Caso contrário, este parágrafo será renderizado.
Podemos aplicar V-Else no bloco de modelo também.
Este é um título
Este é um parágrafo
v-else-if
Assim como o V-ELSE, também podemos usar a diretiva V-ELSE-IF junto com a diretiva V-IF.
Por exemplo:
Carro
Livro
Animal
Nenhum dos Abblove
V-IF vs. V-Show
O V-IF e V-Show meio que fazem a mesma tarefa. Ambos escondem os elementos no DOM com base no valor verdadeiro ou falsamente da expressão passada, mas com uma diferença sutil de esconder e não renderizar elementos.
Se compararmos o custo e o custo do processamento entre esses dois. O V-IF custa mais durante o tempo de execução ou alternativa, enquanto o V-Show custa mais no início da renderização. Então, seria aconselhável usar o V-Show quando alternar é um propósito. Caso contrário, v-se é preferido.
Empacotando
Neste artigo, aprendemos a renderizar condicionalmente o DOM em Vue.JS usando diretrizes V-IF e V-ELSE. Mostramos alguns exemplos e aprendemos sobre a diferença real entre a diretiva V-Show e V-IF. Se este artigo ajudar você a ter um melhor entendimento e conceitos, continue visitando Linuxhint.com para um conteúdo útil.