列表渲染v-for

使用v-for指令基于数组渲染一个列表，v-for指令的值需要使用item in/of items形式的特殊语法，其中items是源数据的数组，而item是迭代的别名。
代码实例：

<template>
<div><p v-for="item in name" >{{item}}</p></div>
</template>
<script>export default{data(){return{name:["张三","李四","王五"]}}
}</script>
<style scoped></style>

运行结果：

复杂数据

大多数情况，我们渲染的都是来源于网络请求，也就是json格式。

<template>
<div v-for="item in result" ><h3>姓名：{{item.name}}</h3><p>年龄：{{item.age}}</p>
</div>
</template>
<script>export default{data(){return{result:[{name:"张三",age:18},{name:"李四",age:19}]}}
}</script>

运行结果：

v-for也支持使用第二关参数表示当前项的位置索引

<template>
<div><p v-for="(item,index) in name " :key="item" >{{item}}---{{ index }}</p></div>
</template>
<script>export default{data(){return{name:["张三","李四","王五"]}}
}</script>

运行结果：

v-for 与对象

可以使用v-for遍历一个对象的所有属性

<template>
<div><p v-for="(item,key,index) in user " :key="item" >{{item}}---{{ key }}---{{ index }}</p></div>
</template>
<script>export default{data(){return{// name:["张三","李四","王五"],user:{name:"张三",age:18}}}
}</script>

运行结果：