v-for
最后更新于:2022-04-02 01:16:17
## v-for指令
**类型:** Array | Object | number | string
**用法:** 基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名:
>[info]示例:
~~~
~~~
>[success]预览:https://ityanxi.github.io/Vue-tutorial/chapter04/07v-for1.html
效果如图:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/a279ffb75fcb134a898c8bbc1b91eb1a_291x261.png)
----
>[success]代码示例2:
~~~
~~~
>[success]预览:https://ityanxi.github.io/Vue-tutorial/chapter04/07v-for2.html
效果如图:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/09c3dce9653c5c6fdc1515a430e99d42_240x597.png)
---
下面我们通过v-for来实现一个用户信息表
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/fe54f48330d40968cd2e34617522bd6d_639x257.png)
>[success]预览:https://ityanxi.github.io/Vue-tutorial/chapter04/07v-for3.html
>[success] 附完整代码
~~~
~~~
';
{{ item.text }}
~~~
>[success]代码示例1:
~~~
- {{value}}
- {{value}}
- {{value}} {{index}}
- {{item}} {{index}}
- {{val}} {{key}}
- {{val}} {{key}} {{index}}
用户信息表
Name | Age | Sex | Addr |
---|---|---|---|
{{ person.name }} | {{ person.age }} | {{ person.sex }} | {{ person.addr }} |