Como implementar renderização condicional em Vue.js
A renderização condicional é uma parte crucial da modelagem em qualquer linguagem. Descubra a abordagem Vue.js.
Vue.js é uma estrutura JavaScript popular que facilita a criação de aplicativos web dinâmicos. Vue.js pode renderizar conteúdo com base em dados e eventos. Isto é particularmente útil para criar interfaces de usuário responsivas e interativas.
Aprenda o que são as diretivas Vue e como usá-las para obter renderização condicional em Vue.js.
O que são diretivas Vue?
As diretivas Vue permitem aprimorar o comportamento dos elementos HTML em 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 Document Object Model (DOM), adicionar comportamento dinâmico aos elementos e gerenciar dados.
Além disso, Vue.js permite criar diretivas personalizadas, permitindo criar facilmente funções reutilizáveis para aplicativos Vue.
A estrutura Vue prefixa suas diretivas com "v-" antes do nome da diretiva. Exemplos de diretivas comumente usadas no Vue incluem v-on, v-bind, v-for e v-if.
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 somente se eles tiverem inserido um endereço de e-mail válido.
No Vue.js, você pode usar diretivas como v-if e v-show para obter renderização condicional em seu aplicativo, diferente de como você renderizaria o conteúdo condicionalmente no React. .js.
Alcançando a renderização condicional com a diretiva v-if
Semelhante à instrução JavaScript if...else, a diretiva v-if em Vue.js contém uma condição. Se não for satisfeito, o Vue.js avalia a seguinte condição especificada em uma diretiva v-else e continua fazendo isso até atender a uma condição ou avaliar 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 condicional de conteúdo com v-if:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1 v-if='false' >{{ message1 }}</h1>
<h1 v-else >{{ message2 }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
message1: 'This is your Vue App.',
message2: 'Not Yet a Vue App.'
}
}
})
app.mount('#app')
</script>
</body>
</html>
O bloco de código acima representa um aplicativo Vue criado adicionando um link Content Delivery Network (CDN) ao 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 a exibição de informações somente quando um usuário clica em um botão ou a exibição de um indicador de carregamento enquanto os dados são carregados de uma API.
Por exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div v-if="showUsers">
<ul>
<li>User1</li>
<li>User2</li>
</ul>
</div>
<button v-on:click="toggleShowUsers()">
Toggle Users
</button>
<h1>{{ message }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
showUsers: true,
message: 'This is your Vue App.'
}
},
methods: {
toggleShowUsers() {
this.showUsers = !this.showUsers
}
}
})
app.mount('#app')
</script>
</body>
</html>
O bloco de código acima usa a diretiva v-if para renderizar conteúdo condicionalmente com base no valor de uma variável booleana, showUsers.
O elemento div é exibido se o valor for true e oculto se for false. Clicar no botão Toggle Users aciona o método toggleShowUsers() para alterar o valor de showUsers.
Este exemplo também usa a diretiva v-on para escutar eventos, como um evento de clique no botão. Ele reavalia a diretiva v-if sempre que o valor de showUsers muda.
Alcançando a renderização condicional com a diretiva v-show
A diretiva v-show é outra maneira de mostrar ou ocultar elementos no Vue.js condicionalmente. É semelhante à diretiva v-if no sentido de que pode renderizar elementos com base em uma expressão booleana. No entanto, existem algumas diferenças críticas entre as duas directivas.
A diretiva v-show não remove o elemento do DOM quando a expressão é avaliada como falsa. Em vez disso, ele usa CSS para alternar a propriedade display do elemento entre none e seu valor original.
Isso significa que o elemento ainda está presente no DOM, mas não fica visível quando a expressão é falsa.
Aqui está um exemplo:
<body>
<div id="app">
<div v-if="showUsers">
<ul>
<li>User1</li>
<li>User2</li>
</ul>
</div>
<button v-on:click="toggleShowUsers()">
Toggle Users
</button>
<h1 v-show="showUsers">{{ message }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
showUsers: true,
message: 'These are the users of the Vue app'
}
},
methods: {
toggleShowUsers() {
this.showUsers = !this.showUsers
}
}
})
app.mount('#app')
</script>
</body>
O bloco de código acima usa a diretiva v-show 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 as diretivas v-if e v-show para mostrar ou ocultar elementos no Vue.js condicionalmente, há alguns fatores importantes a serem considerados.
Quando a condição raramente muda, usar a diretiva v-if é bom. Isso ocorre porque v-if 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 a diretiva v-show, que melhora o desempenho. Isso ocorre porque v-show usa CSS para ocultar ou mostrar o elemento, alternando a propriedade de exibição do CSS entre none e block, 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, proporcionando mais controle sobre a aparência e o comportamento de seus componentes Vue.