Conditional Rendering and List Rendering for Vue Basic Tutorial
- 2021-12-05 05:30:16
- OfStack
1.2 How Elements Are Explained and Implied
1.3 Initial rendering contrast
1.4 Switching consumption comparison
1.5 Comparison of usage scenarios
1.6 Others
2 v-if and v-for 2.1 Why v-if and v-for cannot be used together
2.2 Solution for v-if and v-for 1 What is the use of key for list rendering Summarize
Preface
What is conditional rendering? There will be many such application scenarios in our page. For example, we will put an activity on the shelves today. This activity page is only valid today. At 24 o'clock in the evening or at 0:01 in the morning tomorrow, we will lower this page and hide this picture. If we arrange an operation and maintenance brother to change HTML manually, Then the operation and maintenance brothers will go crazy. In fact, there will be a very simple way, that is, conditional rendering, that is, when 0 o'clock, we will judge this condition. If this condition reaches, for example, 24 o'clock or 0 o'clock, and then hide it, this is a conditional rendering.
What is list rendering? This is the most common, For example, there are many elements on the page, A lot of pictures, Like a news website loading 20 articles at a time, if you write HTML by hand, people on the news website will not have to work, and they will knock HTML code every day. There will be a loop statement similar to for loop in our C language code, and there will be a loop statement in this place. Let's build the elements of this page and generate it, which is list rendering. 1 v-if and v-show
1.1 Role
Are used to control the display and hiding of elements
1.2 How Elements Are Explained and Implied
v-if controls the creation and destruction of elements in the virtual DOM tree, and the response system of Vue updates the actual DOM according to the virtual DOM tree, thus indirectly controlling the explicit and implicit elements on the actual DOM
v-show Hide Elements by Adding Styles display: none to Elements
1.3 Initial rendering contrast
v-if is lazy and does nothing if the initial rendering condition is false; Compilation starts only if the condition is true
v-show Elements are compiled and preserved regardless of the initial rendering conditions, and then switched by CSS according to the conditions
1.4 Switching consumption comparison
If you switch between show and hide frequently, v-if will frequently create and destroy elements, while v-show just switches styles
Therefore, the switching consumption of v-if is higher
1.5 Comparison of usage scenarios
Use v-if if the display of the element hides at the beginning of 1 and will not change again
Use v-show if the element needs to switch between explicit and implicit frequently
1.6 Others
v-if can be used with template, v-show cannot
v-if can be matched with v-else, and v-show has no special syntax
2 v-if and v-for
2.1 Why v-if and v-for cannot be used together
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 a higher priority than v-if, so this template:
<ul>
<li v-for="item in list" v-if="item.isActive" :key="item.id">
{{item.name}}
</li>
</ul>
Will undergo the following calculation:
this.list.map(function(item) {
if (item.isActive) {
return item.name
}
})
We have to traverse the entire list every time we re-render, even though there are very few item with isActive as true, which is a great waste of performance, so both cannot be used on the same element at the same time
2.2 Solution for v-if and v-for 1
1. If you want to control the explicit and implicit of the entire list, you can move v-if to container elements, such as:
<body>
<div id="example">
<ul v-if="listShow">
<li v-for="item in activeItems" :key="item.id">{{item.name}}</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#example",
data: {
list: [
{ id: 1, name: " Luffy ", isActive: true },
{ id: 2, name: " Sauron ", isActive: false },
{ id: 3, name: " Shan Zhi ", isActive: true },
],
listShow: false,
}
});
</script>
2. If you want to filter the items in the list, you can use the calculated attribute (computed) to return the filtered list, such as:
<body>
<div id="example">
<ul>
<li v-for="item in activeItems" :key="item.id">{{item.name}}</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#example",
data: {
list: [
{ id: 1, name: " Luffy ", isActive: true },
{ id: 2, name: " Sauron ", isActive: false },
{ id: 3, name: " Shan Zhi ", isActive: true },
],
},
computed: {
activeItems: function () {
return this.list.filter((item) => item.isActive);
},
},
});
</script>
3 What is the use of key for list rendering
When using v-for for list rendering, an key attribute must be added to the element, and this key must be a unique identity
<ul>
<li v-for="item in list" :key="item.id">{{item.name}}</li>
</ul>
We know that when updating elements, Vue will not directly operate the real DOM (rendering the real DOM is very expensive), but generate a new virtual DOM according to the new data, then compare the differences between the old and new virtual DOM, and perform DOM operation according to the comparison results to update the view
When rendering the list, if there is an key attribute, because it is the only one identification, if key is different when comparing two old and new nodes, there is no need for in-depth comparison.
Why can't index be used as key? Because index is unstable and variable, for example, deleting the first element in the list will cause the following element index to change, which will cause key to change. At this time, when Vue compares the old and new nodes, when it encounters the same node as key, it will make an in-depth comparison and find that the node content has changed, and it will create a new real DOM to replace the original real DOM. The original operation that only needs to delete the first element in the real DOM will become a new one and replace all subsequent real DOM, resulting in great waste of performance