Once there is order in js, you have to use an array ([]) to store it
Everyone in the array is an object ({})
Everyone must have a unique ID

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            persons: [
                {id: '001',name:'Zhang San',age: 18},
                {id: '002',name:'Li Si',age: 19},
                {id: '003',name:'Wang Wu',age: 20},
            ]
        }
    }
})

<ul>
    <li v-for="">full name-Age</li>
</ul>

You can use a v-for on the person you want to generate multiple. The specific syntax is as follows:

<ul>
    <li v-for="person in persons">full name-Age</li>
</ul>

Persons: refers to the persons data in the data
person: it can be understood as a formal parameter (it can be defined arbitrarily)

People: what is the length in it? I'll generate several elements for you (here is li)

If you want to use person, you have to use interpolation syntax ({}). The attributes in interpolation syntax come from and: (1) are from normal attributes; (2) It may come from computing properties that I have not configured at all; (3) Formal parameters that may come from v-for="person in persons"
You can write it like this

<li v-for="p in persons">
    {{p.name}}-{{p.age}}
</li>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            persons: [
                {id: '001',name:'Zhang San',age: 18},
                {id: '002',name:'Li Si',age: 19},
                {id: '003',name:'Wang Wu',age: 20},
            ]
        }
    }
})

key

And the details
1. This traversal is missing a particularly important tag attribute, which is called key
Explanation of vue official website key
This is only the key configuration

Traversal array (most used)

<li v-for="p in persons" :key="p.id">
    {{p.name}}-{{p.age}}
</li>

This way, each li has a unique identifier

In vue or React, both frameworks are. As long as you generate multiple data with the same structure in the way of V-for (traversal), you must give each structure a name (or an ID): the key is the ID of each node

There is another way to write key

<li v-for="p in persons" >
    {{p.name}}-{{p.age}}
</li>

p can accept two formal parameters

<li v-for="(a,b,c) in persons" >
    {{a}}----{{b}}---{{c}}
</li>

html display:

{ "id": "001", "name": "Zhang San", "age": 18 }----0---
{ "id": "002", "name": "Li Si", "age": 19 }----1---
{ "id": "003", "name": "Wang Wu", "age": 20 }----2---

a: It's item, every item you traverse
b: Is the index value
c:undefined cannot receive C

The first way to write:

<li v-for="(p,index) in persons" :key="p.id">
    {{p.name}}-{{p.age}}
</li>

The second way to write:

<li v-for="(p,index) in persons" :key="index">
    {{p.name}}-{{p.age}}
</li>

Another detail is: in can be replaced by of

<li v-for="(p,index) of persons" :key="index">
    {{p.name}}-{{p.age}}
</li>

v-for can also traverse object types

<li v-for="(a,b) in car">
    {{a}}---{{b}}
</li>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            car:{
                name: 'Toyota',
                price: '30w',
                color: 'black'
            }
        }
    }
})

Toyota---name
30w---price
 black---color

a is value
The so-called b is the key

<li v-for="(value,k) in car" :key="k">
    {{k}}-{{value}}
</li>

You can also traverse strings (but not much)

<h2>Test traversal string</h2>
<ul>
    <li v-for="(a,b) in str">
        {{a}}---{{b}}
    </li>
</ul>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            str: 'Hello'
        }
    }
})

H---0
e---1
l---2
l---3
o---4

a: Is every character in the string
b: It is a statistic of a natural number (or index value)

Traversal the specified number of times (especially rare)

<h2>Test traversal specified times</h2>
<ul>
    <li v-for="(a,b) of 5">
        {{a}}---{{b}}
    </li>
</ul>

1---0
2---1
3---2
4---3
5---4

So it can be written as follows:

<h2>Test traversal specified times</h2>
<ul>
    <li v-for="(number,index) of 5" :key="index">
        {{index}}---{{number}}
    </li>
</ul>

summary

v-for instruction
1. Used to display list data
2.yu syntax: V-for = "(item, index) in XXX": key = "yyy" (key is the unique value)
3. Traversable: array, object, string (less used), specified times (less used)