What is the method of deconstructing V-for

This article mainly talks about "what is the method of deconstructing V-for". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the method of V-for deconstruction"?

It works because Vue promotes the entire first part of v-for directly to the parameter part of the function:

Function (_) {/ /.}

Vue then uses this function internally to render the list.

This means that any valid Javascript that can be placed in parentheses in the function can also be placed in the v-for, as shown below:

Other v-for skills

As we all know, you can get an index from v-for by using the following tuple:

When using an object, you can also capture key:

{{key}}: {{value}}

You can also use a combination of these two methods to get the key and index of the property:

# {{index + 1}. {{key}}: {{value}}

Vue does support iterating over Map and Set objects, but because they are not responsive in Vue 2.x, their use is very limited. We can also use any Iterable here, including generators.

By the way, I sometimes use Map or Set, but usually calculate only as intermediate objects. For example, if I need to find all unique strings in the list, I can do this:

Computed () {uniqueItems () {/ / create a Set from the array and delete all duplicates const unique = new Set (this.items); / / convert the Set back to the array return Array.from (unique) available for Vue;}}

String and v-for

Did you know that you can also use v-for to traverse strings?

This is not in the documentation, but I only found it when I was reading through the code to figure out how v-for was implemented:

{{character}}

Each character is printed on it.

At this point, I believe you have a deeper understanding of "what is the method of V-for deconstruction". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!