Preface
What is conditional rendering? There will be many such application scenarios on our page. For example, we want to list an event today. This activity page is only valid today. At 24 o'clock in the evening or at 0:1 a.m. tomorrow morning, you must lower the page and hide the image. If we arrange for an operation and maintenance brother to manually modify HTML, then the operation and maintenance brother will go crazy. In fact, there will be a very simple method here, which is to render the condition, that is, when 0 points, we judge this condition. If this condition reaches a time point of 24 points or 0 points, then hide it, and this is a rendering of condition.
What is list rendering? This is the most common one. For example, there are many elements and many pictures on the page. For example, 20 items are loaded at a time on the news website. If you use your hand to write HTML, then the people on the news website will not have to work and type the HTML code every day. There will be a loop statement similar to the for loop in our C language code. This allows us to build the elements of this page and generate them. This is list rendering. 1 v-if and v-show
1.1 Function
All are used to control the display and hiding of elements
1.2 How to control the appearance and implicitness of elements
v-if controls the creation and destruction of elements on the virtual DOM tree. Vue's response system will update the actual DOM according to the virtual DOM tree, thereby indirectly controlling the visible and implicit elements on the actual DOM.
v-show allows elements to hide by adding style display:none to the element
1.3 Initial rendering comparison
v-if is lazy. If the initial rendering condition is false, nothing will be done; only if the condition is true, the compilation will start
v-show The element is always compiled and retained regardless of the initial rendering conditions, and then switched through CSS according to the conditions.
1.4 Switch consumption comparison
If you frequently switch to show and hide, v-if will frequently create and destroy elements, while v-show will just switch styles
Therefore, the switching consumption of v-if is higher
1.5 Use scenario comparison
If the display of the element is hidden from the beginning, it will not change again, use v-if
If the element needs to frequently switch to visible and hidden features, use v-show
1.6 Others
- v-if can be used with template, v-show cannot
- v-if can be matched with v-else, v-show has no special syntax
2 v-if and v-for
2.1 Reasons why v-if and v-for cannot be used at the same time
Why can't v-if and v-for be used on the same element at the same time?
When Vue processes instructions, v-for has higher priority than v-if, so this template:
<ul>
<li v-for="item in list" v-if="" :key="">
{{}}
</li>
</ul>
The following operations will be performed:
(function(item) {
if () {
return
}
})
We have to iterate through the entire list every time we re-render, even if there are few items with isActive true, this will cause great performance waste, so both cannot be used on the same element at the same time.
2.2 Solutions for v-if and v-for
1. If you want to control the visible and hidden content of the entire list, you can move the v-if to the container element, such as:
<body>
<div >
<ul v-if="listShow">
<li v-for="item in activeItems" :key="">{{}}</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#example",
data: {
list: [
{ id: 1, name: "Luffy", isActive: true },
{ id: 2, name: "Zoro", isActive: false },
{ id: 3, name: "Sanji", isActive: true },
],
listShow: false,
}
});
</script>
2. If you want to filter items in the list, you can use computed properties to return the filtered list, such as:
<body>
<div >
<ul>
<li v-for="item in activeItems" :key="">{{}}</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#example",
data: {
list: [
{ id: 1, name: "Luffy", isActive: true },
{ id: 2, name: "Zoro", isActive: false },
{ id: 3, name: "Sanji", isActive: true },
],
},
computed: {
activeItems: function () {
return ((item) => );
},
},
});
</script>
3 What is the use of a list rendering key
When using v-for for list rendering, you must add a key attribute to the element, and this key must be a unique identifier
<ul>
<li v-for="item in list" :key="">{{}}</li>
</ul>
We know that when Vue updates elements, it will not directly operate the real DOM (the overhead of rendering the real DOM is very high), but instead generates a new virtual DOM based on the new data, then compares the new and old virtual DOM differently, and updates the view based on the comparison results.
When rendering a list, if there is a key attribute, since it is a unique identifier, if the keys are different when comparing two new and old nodes, there is no need to make in-depth comparisons.
Why can't index be used as key? Because the index is unstable and variable, for example, deleting the first element of the list will cause the index of the subsequent element to change, resulting in the key change. At this time, when Vue compares new and old nodes, when encountering nodes with the same key, it will conduct in-depth comparisons. When the node content has changed, it will create a new real DOM to replace the original real DOM. The operation that originally needed to delete the first element in the real DOM would become a new creation or replacement of all subsequent real DOMs, causing a huge waste of performance.
Summarize
This is the article about conditional rendering and list rendering in Vue basic tutorial. For more related Vue conditional rendering and list rendering content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!