This is the 8th day of my participation in the August More Text Challenge

Today we will learn V-for and show our Olympic winning projects.

It solves the problem

The HTML tag is rendered repeatedly against the content collection, which is iterated iteration.

This means that we have to render a lot of repetitive components on the page, such as a book site that repeatedly presents each book (or hot 100 books) in a structure.

Here maruko shows the latest number of Olympic gold MEDALS in three events. Let’s cheer for our Olympic athletes!! Blunt!

usage

The V-for user repeats the template content and replaces the template with the object of the current iteration (such as the current object, and the subscript, etc.) in each iteration.

<li v-for="(item,index) of projects"> {{item}} - {{index}} </li>
Copy the code

The code shown

<! DOCTYPE HTML > < HTML lang="en"> <head> <title>vue3 vue-for</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <script SRC ="/ vue3.1.5_vuue.global.js "></script> </head> <body background="/1aoyunjiayou.jpg" style="background-size:1000px 1000px;" "> < p style=" max-width: 100%; clear: both; min-height: 1em; < / span > < h3 > < a v - bind: href = "url" > click access - > child sauce @ CSDN blog < / a > < / h3 > < h3 > shown here useless y - for < / h3 > < ul > < li > 38 gold MEDALS The men's diving project < / li > < li > 37 gold MEDALS Women's 500m Rowing </li> <li> 36th Gold Medal Women's javelin Throw </li> </ul> < H3 > V-for ="item in projects "> <li>{{item}}{{index}}</li> </ul> <h3> v-for (item, index) in </h3> <ul v-for="(item, index) in projects"> <li>{{item}} - {{index}} </li> </ul> <h3> vue style</h3> <ul> <li v-for="(item,index) of projects">  {{item}} - {{index}} </li> </ul> </div> </body> <script> const { createApp } = Vue const url = 'https://blog.csdn.net/qq_28008615' const projects = [' men dive ',' women rowing ',' Women javelin '] const app = {setup() {return {url, projects } } } createApp(app).mount('#wzApp') </script> </html>Copy the code

The effect is as follows:

parsing

Several uses of V-ifor are shown above.

  • v-for item in projects
  • v-for (item , index) in projects
  • There is also a VUe-style for loop.

Here we look specifically at the last use of v-for(item, index) in. We can see that unlike the vue style rendering below, the overall V-for iterates over the current tag, whether it is li or UL.

Vue-style is recommended for more detailed rendering (do not repeat output ul tags).

I am meatball, learn a little knowledge every day. A front-end development hope to encourage more support, thank you