In the third lesson, we will talk about conditional rendering. How to display something on the page only if some condition is met.
→ Vue.js beginners lesson 1: instance Vue
→ Vue.js for beginners, lesson 2: binding attributes
→ Vue.js beginners lesson 3: conditional rendering
→ Vue.js beginners lesson 4: lists rendering
→ Vue .js for beginners lesson 5: event processing
→ Vue.js beginners lesson 6: binding classes and styles
→ Vue.js beginners lesson 7: calculated properties
→ Vue.js beginners lesson 8: components
The purpose of the lesson
We need an inscription in the product card that informs the visitor whether the product is in stock or not. If the product is in stock, an inscription should be displayed
In Stock. If it is not in stock - an inscription Out of Stock. The decision to display a particular inscription should be made based on the data stored in the application.
Initial code
Here's the code we'll get started with. It is, as usual, in the file
index.html, in the 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>
In the file
main.js, when setting up a Vue instance, the following data object will be used:
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg",
inStock: true
}
Notice that
dataa new property has been added to the object . This is a property inStockthat holds a boolean value true.
Task
When developing web applications, it is often necessary for an element to be displayed on the page, depending on the fulfillment of a certain condition. For example, if the inventory of an item is over, you need to inform about it in the item card.
The corresponding messages are planned to be issued as elements
<p>. This means that somewhere in there index.htmlwill be the following elements:
<p>In Stock</p>
<p>Out of Stock</p>
Our task is to withdraw one of them in the event that the goods are in stock, and the other in a situation when the goods are not in stock.
The solution of the problem
In Vue, the solution to this problem looks simple and straightforward.
As you already know, data indicating the presence or absence of goods in stock are described in
main.js, in the object data:
inStock: true
In order to tell the system which element
<p>to render, we can use the v-ifand directives v-else. This means that the index.htmlfollowing will fall into :
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
If
inStockcontains a true value, the first item is printed <p>. Otherwise, the second item will be displayed. In our case inStock, the value is written in true, so it will be displayed In Stock.
We have stocks in stock.
Great! We've just used conditional rendering to display product details. We have solved the problem. But let's not stop there and continue our exploration of conditional rendering.
V-else-if directive
Our mechanism for conditional rendering based on the guidelines
v-ifand v-elsecan be expanded by adding a another level of logic. This can be done using the directive v-else-if. To demonstrate this, let's complicate our example a little.
Suppose that the object
data, in main.js, has information about the quantity of goods. They are stored in the property inventory:
inventory: 100
By analyzing this property using JavaScript expressions enclosed in quotation marks, we can provide more accurate product information to page visitors:
<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>
In this situation, the first element will be displayed on the page
<p>, since the corresponding expression turns out to be true.
V-show directive
If a certain element of the page needs to be hidden and displayed frequently, it means that to implement this mechanism it makes sense to look at the directive
v-show. An element with such a directive will always be present in the DOM, but it will be visible only if the condition passed to the directive turns out to be true. In fact, we are talking about the fact that, thanks to the use of this directive, a CSS property will be applied to the element, by condition display: none.
This method provides better performance than managing items using
v-ifand v-else.
The application of this directive looks like this:
<p v-show="inStock">In Stock</p>
The solution to our problem, in which the directives
v-ifand were used v-else, suits us. Therefore, we will focus on it and will not change anything.
Workshop
Add a property to the data object
onSale. It should be used to control the rendering of an element <span>that displays text On Saleand informs visitors about the sale.
Here is a template you can use to solve this problem.
Here is the solution to the problem.
Outcome
Today you learned about conditional rendering using Vue. Namely, it was about the following:
- There are Vue directives that allow you to conditionally render elements:
- v-if
- v-else-if
- v-else
- v-show
- When working with directives, you can use JavaScript expressions that are passed to them in quotes.
- If the expression passed to the directive in quotation marks is true, the item is output.
- The directive
v-showonly affects the visibility of an element, it does not insert elements into the DOM and does not remove elements from the DOM.
Do you have any problem that you, having started acquaintance with Vue, are already planning to solve with the help of this framework?
→ Vue.js beginners lesson 1: instance Vue
→ Vue.js for beginners, lesson 2: binding attributes
→ Vue.js beginners lesson 3: conditional rendering
→ Vue.js beginners lesson 4: lists rendering
→ Vue .js for beginners lesson 5: event processing
→ Vue.js beginners lesson 6: binding classes and styles
→ Vue.js beginners lesson 7: calculated properties
→ Vue.js beginners lesson 8: components
