Na terceira lição, falaremos sobre renderização condicional. Como exibir algo na página somente se alguma condição for atendida.
→ Vue.js para iniciantes lição 1: instância Vue
→ Vue.js para iniciantes, lição 2: atributos de vinculação
→ Vue.js para iniciantes lição 3: renderização condicional
→ Vue.js para iniciantes lição 4: exibição de listas
→ Vue .js para iniciantes lição 5: processamento de eventos
→ Vue.js para iniciantes lição 6: ligando classes e estilos
→ Vue.js para iniciantes lição 7: propriedades calculadas
→ Vue.js para iniciantes lição 8: componentes
O propósito da lição
Precisamos de uma inscrição no cartão do produto que informe ao visitante se o produto está em estoque ou não. Se o produto estiver em estoque, uma inscrição deve ser exibida
In Stock. Se não estiver em estoque - uma inscrição Out of Stock. A decisão de exibir uma inscrição específica deve ser feita com base nos dados armazenados no aplicativo.
Código inicial
Aqui está o código com o qual vamos começar. Está, como sempre, no arquivo
index.html, na tag <body>:
<div id="app">
<div class="product">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
No arquivo
main.js, ao configurar uma instância Vue, o seguinte objeto de dados será usado:
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg",
inStock: true
}
Observe que
datauma nova propriedade foi adicionada ao objeto . Esta é uma propriedade inStockque possui um valor booleano true.
Tarefa
Ao desenvolver aplicativos da web, muitas vezes é necessário que um elemento seja exibido na página, dependendo do cumprimento de uma determinada condição. Por exemplo, se o estoque de um item acabou, você precisa informar sobre isso no cartão do item.
As mensagens correspondentes são planejadas para serem emitidas como elementos
<p>. Isso significa que em algum lugar index.htmlhaverá os seguintes elementos:
<p>In Stock</p>
<p>Out of Stock</p>
Nossa tarefa é retirar um deles no caso de a mercadoria estar em estoque, e o outro em uma situação em que a mercadoria não esteja em estoque.
A solução do problema
No Vue, a solução para esse problema parece simples e direta.
Como você já sabe, os dados indicativos da presença ou ausência de mercadoria em estoque estão descritos em
main.js, no objeto data:
inStock: true
Para informar ao sistema qual elemento
<p>renderizar, podemos usar as diretivas v-ife v-else. Isso significa que o index.htmlseguinte se enquadrará em :
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
Se
inStockcontiver um valor verdadeiro, o primeiro item será impresso <p>. Caso contrário, o segundo item será exibido. No nosso caso inStock, o valor está escrito e true, portanto, será exibido In Stock.
Temos estoques em estoque.
Ótimo! Acabamos de usar a renderização condicional para exibir detalhes do produto. Resolvemos o problema. Mas não vamos parar por aí e continuar nossa exploração da renderização condicional.
Diretiva V-else-if
Nosso mecanismo de renderização condicional com base nas diretrizes
v-ife v-elsepode ser expandido adicionando um outro nível de lógica. Isso pode ser feito usando a diretiva v-else-if. Para demonstrar isso, vamos complicar um pouco nosso exemplo.
Suponha que o objeto
data, em main.js, tenha informações sobre a quantidade de mercadorias. Eles são armazenados na propriedade inventory:
inventory: 100
Ao analisar essa propriedade usando expressões JavaScript entre aspas, podemos fornecer informações mais precisas do produto aos visitantes da página:
<p v-if="inventory > 10">In stock</p>
<p v-else-if="inventory <= 10 && inventory > 0">Almost sold out!</p>
<p v-else>Out of stock</p>
Nessa situação, o primeiro elemento será mostrado na página
<p>, pois a expressão correspondente acaba sendo verdadeira.
Diretiva V-show
Se um determinado elemento da página precisa ser ocultado e exibido com frequência, significa que, para implementar esse mecanismo, faz sentido examinar a diretiva
v-show. Um elemento com tal diretiva sempre estará presente no DOM, mas será visível apenas se a condição passada para a diretiva for verdadeira. Na verdade, estamos falando sobre o fato de que, graças ao uso desta diretiva, uma propriedade CSS será aplicada ao elemento, por condição display: none.
Este método oferece melhor desempenho do que gerenciar itens usando
v-ife v-else.
A aplicação desta diretiva se parece com isto:
<p v-show="inStock">In Stock</p>
A solução para o nosso problema, em que as diretrizes
v-ife foram utilizadas v-else, nos convém. Portanto, vamos nos concentrar nisso e não vamos mudar nada.
Oficina
Adicione uma propriedade ao objeto de dados
onSale. Deve ser usado para controlar a renderização de um elemento <span>que exibe texto On Salee informa os visitantes sobre a venda.
Aqui está um modelo que você pode usar para resolver esse problema.
Aqui está a solução para o problema.
Resultado
Hoje você aprendeu sobre renderização condicional usando Vue. Ou seja, era sobre o seguinte:
- Existem diretivas Vue que permitem renderizar elementos condicionalmente:
- v-if
- v-else-if
- v-else
- v-show
- Ao trabalhar com diretivas, você pode usar expressões JavaScript que são passadas a eles entre aspas.
- Se a expressão passada para a diretiva entre aspas for verdadeira, o item será gerado.
- A diretiva
v-showafeta apenas a visibilidade de um elemento, ela não insere elementos no DOM e não remove elementos do DOM.
Você tem algum problema que você, tendo começado a conhecer o Vue, já está planejando resolver com a ajuda deste framework?
→ Vue.js para iniciantes lição 1: instância Vue
→ Vue.js para iniciantes, lição 2: atributos de vinculação
→ Vue.js para iniciantes lição 3: renderização condicional
→ Vue.js para iniciantes lição 4: renderização de listas
→ Vue .js para iniciantes lição 5: processamento de eventos
→ Vue.js para iniciantes lição 6: classes e estilos de ligação
→ Vue.js para iniciantes lição 7: propriedades calculadas
→ Vue.js para iniciantes lição 8: componentes
