Como implementar renderização condicional em Vue.js

Vue.js é uma estrutura JavaScript popular que facilita a criação de aplicativos da Web dinâmicos. O Vue.js pode renderizar conteúdo com base em dados e eventos. Isso é particularmente útil para criar interfaces de usuário responsivas e interativas.

Aprenda o que são as diretivas do Vue e como usá-las para alcançar a renderização condicional no Vue.js.

O que são Diretivas Vue?

As diretivas Vue permitem aprimorar o comportamento dos elementos HTML nos modelos Vue.js adicionando atributos exclusivos a eles.

As diretivas são uma parte fundamental do Vue.js e fornecem uma maneira simples e poderosa de manipular o Modelo de objeto de documento (DOM), adicione comportamento dinâmico a elementos e gerencie dados.

Além disso, o Vue.js permite que você crie diretivas personalizadas, permitindo que você crie facilmente funções reutilizáveis ​​para aplicativos Vue.

O framework Vue prefixa suas diretivas com

"v-" antes do nome da diretiva. Exemplos de diretivas comumente usadas no Vue incluem v on, v-bind, v-para, e v-se.

O que é renderização condicional?

A renderização condicional permite exibir ou ocultar elementos com base nas condições especificadas. Por exemplo, você pode usar a renderização condicional para mostrar uma mensagem aos usuários apenas se eles inserirem um endereço de e-mail válido.

No Vue.js, você pode usar diretivas como v-se e v-show para obter renderização condicional em seu aplicativo, diferente de como você faria renderizar conteúdo condicionalmente em React.js.

Alcançando renderização condicional com a diretiva v-if

Igual a o JavaScript se... senão declaração, o v-se diretiva em Vue.js contém uma condição. Se não for satisfeito, o Vue.js avalia a seguinte condição especificada em um v-senão diretiva e continua fazendo isso até que atenda a uma condição ou avalie todas as condições.

Esta diretiva permite renderizar condicionalmente um elemento com base em um valor booleano. O compilador Vue.js não renderizará a parte se seu valor for falso.

Aqui está um exemplo de renderização de conteúdo condicionalmente com v-se:

html>
<htmlidioma="en">
<cabeça>
<título>Documentotítulo>
<roteiroorigem=" https://unpkg.com/vue@3/dist/vue.global.js">roteiro>
cabeça>
<corpo>
<diveu ia="aplicativo">
<h1v-se='falso' >{{ mensagem1 }}h1>
<h1v-senão >{{ mensagem2 }}h1>
div>
<roteiro>
 app const = Vue.createApp({
 dados () {
 retornar {
 message1: 'Este é o seu Vue App.',
 message2: 'Ainda não é um aplicativo Vue.'
 }
 }
 })
 app.mount('#app')
roteiro>
corpo>
html>

O bloco de código acima descreve um aplicativo Vue criado adicionando um Rede de entrega de conteúdo (CDN) link para o corpo do seu arquivo HTML. A diretiva v-if renderizará o elemento h1 somente se sua condição for verdadeira.

Em aplicativos Vue, há situações em que você precisa renderizar um componente com base em critérios dinâmicos específicos. Isso é útil em cenários como exibir informações somente quando um usuário clica em um botão ou mostrar um indicador de carregamento enquanto os dados estão sendo carregados de uma API.

Por exemplo:

html>
<htmlidioma="en">
<cabeça>
<título>aplicativo Vuetítulo>
<roteiroorigem=" https://unpkg.com/vue@3/dist/vue.global.js">roteiro>
cabeça>
<corpo>
<diveu ia="aplicativo">
<divv-se="mostrarUsuários">
<ul>
<li>Usuário1li>
<li>Usuário2li>
ul>
div>
<botãov on: clique="alternarMostrarUsuários()">
 Alternar usuários
botão>
<h1>{{ mensagem }}h1>
div>
<roteiro>
 app const = Vue.createApp({
 dados () {
 retornar {
 mostrarUsuários: verdadeiro,
 mensagem: 'Este é o seu Vue App.'
 }
 },
 métodos: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
roteiro>
corpo>
html>

O bloco de código acima usa o v-se diretiva para renderizar conteúdo condicionalmente com base no valor de uma variável booleana, showUsers.

O div elemento é exibido se o valor for verdadeiro e escondido se for falso. Clicando no Alternar usuários botão aciona o toggleShowUsers() método para alterar o valor de showUsers.

Este exemplo também usa o v on diretiva para ouvir eventos, como um evento de clique no botão. Ele reavalia o v-se directiva sempre que o valor de showUsers mudanças.

Atingindo a renderização condicional com a diretiva v-show

O v-show A diretiva é outra maneira de mostrar ou ocultar elementos no Vue.js condicionalmente. É semelhante ao v-se diretiva na medida em que pode renderizar elementos com base em uma expressão booleana. No entanto, existem algumas diferenças críticas entre as duas diretivas.

O v-show A diretiva não remove o elemento do DOM quando a expressão é avaliada como falsa. Em vez disso, ele usa CSS para alternar o elemento mostrar propriedade entre nenhum e seu valor original.

Isso significa que o elemento ainda está presente no DOM, mas não é visível quando a expressão é falsa.

Aqui está um exemplo:

<corpo>
<diveu ia="aplicativo">
<divv-se="mostrarUsuários">
<ul>
<li>Usuário1li>
<li>Usuário2li>
ul>
div>
<botãov on: clique="alternarMostrarUsuários()">
 Alternar usuários
botão>
<h1v-show="mostrarUsuários">{{ mensagem }}h1>
div>
<roteiro>
 app const = Vue.createApp({
 dados () {
 retornar {
 mostrarUsuários: verdadeiro,
 mensagem: 'Estes são os usuários do aplicativo Vue'
 }
 },
 métodos: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
roteiro>
corpo>

O bloco de código acima usa o v-show diretiva para exibir uma mensagem informando, ‘Estes são os usuários do aplicativo Vue' sempre que você clicar no botão de alternância.

Escolhendo entre v-if e v-show

Ao decidir entre usar o v-se e v-show diretivas para mostrar ou ocultar elementos no Vue.js condicionalmente, existem alguns fatores importantes a serem considerados.

Quando a condição raramente muda, usando o v-se diretiva é boa. Isto é porque v-se remove o elemento do DOM quando a condição é falsa, o que pode prejudicar o desempenho ideal. O elemento só é renderizado quando a condição se torna verdadeira e removido do DOM quando a condição se torna falsa novamente.

Por outro lado, se for provável que a condição mude com frequência, é melhor usar o v-show diretiva, o que melhora o desempenho. Isto é porque v-show usa CSS para ocultar ou mostrar o elemento alternando a propriedade de exibição do CSS entre nenhum e bloco, deixando o elemento sempre renderizado para o DOM.

Renderização condicional em seu aplicativo Vue facilitada

Você aprendeu a renderizar conteúdo condicionalmente em aplicativos Vue com as diretivas v-if e v-show. Ao utilizar essas diretivas, você pode renderizar conteúdo rapidamente com base em várias condições, dando a você mais controle sobre a aparência e o comportamento de seus componentes Vue.