Shulou(Shulou.com)06/02 Report--

This article will explain in detail the example analysis of conditional rendering and list rendering in Vue. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Preface

What is conditional rendering? There will be a lot of such application scenarios on our page, for example, we are going to put on an event today, and this activity page is only valid today. At 24:00 in the evening or at 0: 1 seconds in the morning, you have to drop this page down and hide this picture. If we arrange for an operation and maintenance brother to manually change the HTML, then the operation and maintenance brother will go crazy. In fact, there will be a very simple way to render the condition, that is, when it is 0 o'clock, we go to judge this condition. If this condition reaches, say, 24:00 or a point in time at 0: 00, then hide it. This is a conditional rendering.

What is list rendering? This is the most common. For example, there are many elements and pictures on the page. For example, a news website loads 20 items at a time. If you type HTML by hand, then people on the news website do 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. Let's build and generate the elements of this page, which is list rendering. 1 v-if and v-show

1.1 effect

Are used to control the display and hiding of elements.

1.2 Control the way elements are visible and hidden

V-if controls the creation and destruction of elements on the virtual DOM tree, and the response system of Vue will update the actual DOM according to the virtual DOM tree, thus indirectly controlling the appearance and concealment of the elements on the actual DOM.

V-show hides an element by adding a style display:none to it

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 will the compilation begin.

V-show elements are always compiled and retained regardless of the initial rendering conditions, and then switched through CSS according to the conditions

1.4 comparison of switching consumption

If you frequently switch between show and hide, v-if will frequently create and destroy elements, while v-show will just switch styles

Therefore, the handover consumption of v-if is higher.

1.5 use scene comparison

If the display of the element is hidden in the beginning, it will not change again, use v-if

If elements need to switch between explicit and hidden frequently, use v-show

1.6 other

V-if can be used with template, but not v-show

V-if can be paired with vmurelseflore vripshow without 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 not use v-if and v-for on the same element at the same time?

When Vue processes instructions, v-for takes precedence over v-if, so this template:

{{item.name}}

The following operations will be performed:

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 true, which is a huge 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. If you want to control the display and concealment of the entire list, you can move v-if to the container element, such as:

{{item.name}} const vm = new Vue ({el: "# example", data: {list: [{id: 1, name: "Luffy", isActive: true}, {id: 2, name: "Sauron", isActive: false}, {id: 3, name: "Mountain", isActive: true},], listShow: false,}})

2. If you want to filter items in the list, you can use the calculation property (computed) to return the filtered list, such as:

{{item.name}} const vm = new Vue ({el: "# example", data: {list: [{id: 1, name: "Luffy", isActive: true}, {id: 2, name: "Sauron", isActive: false}, {id: 3, name: "Mountain", isActive: true},],},} Computed: {activeItems: function () {return this.list.filter ((item) = > item.isActive) },},}); 3 what is the use of key rendered by list

When using v-for for list rendering, you must add a key attribute to the element, and the key must be a unique identity

{{item.name}}

We know that when Vue updates elements, it does not directly manipulate the real DOM (rendering the real DOM costs a lot), but generates a new virtual DOM based on the new data, then compares the difference between the new and old virtual DOM, and updates the view by DOM operation according to the comparison result.

When rendering a list, if there is a key attribute, because it is a unique identity, there is no need for an in-depth comparison when comparing two new and old nodes with different key.

Why can't index be used as a key? Because index is unstable and mutable, such as deleting the first element of the list, it will cause the subsequent element index to change, resulting in a change in key. At this time, when Vue compares the old and new nodes, when it encounters nodes with the same key, it will make an in-depth comparison and find that the contents of the nodes have changed, and 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 and replace all subsequent real DOM, resulting in a great waste of performance.

This is the end of this article on "sample analysis of conditional rendering and list rendering in Vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.