vue专栏 02.vue基础语法 05.v-for 01.基础

# 01.v-for基础

[toc]{type: "ol", level: [3,4]}

### js结构
```js
const app = Vue.createApp({
    data() {
        return {
            personArr: ['lili', 20, '人狠话不多'],
            personObj: {name: 'lisa', age:24, info: '话多人不狠'},
            persons: [
                {name: 'lili', age:20, info: '人狠话不多'},
                {name: 'lisa', age:24, info: '话多人不狠'},
            ]
        }
    }
}).mount('#app');
```


### 遍历
#### 遍历数组
- value
```html
<ul>
    <li v-for="p in personArr">{{ p }}</li>
</ul>
```
![v-for基础-01](imgs/01.v-for基础-01.png)
- value index
> 形参位置固定
> 小括号中的index必须在后面
```html
    <ul>
        <li v-for="(p, index) in personArr">{{index}} {{ p }}</li>
    </ul>
```
![v-for基础-02](imgs/01.v-for基础-02.png)

#### 遍历对象
> 形参位置固定
```html
<ul>
    <li v-for="(value, key, index) in personObj">{{index}} {{key}} {{value}}</li>
</ul>
```
![v-for基础-03](imgs/01.v-for基础-03.png)

#### 遍历数组中的对象
```html
<ul>
    <li v-for="(p, index) in persons">{{index}} {{ p.name }} {{ p.age}} {{p.info}}</li>
</ul>
```
![v-for基础-04](imgs/01.v-for基础-04.png)