v-for是vue 的循环指令，作用是遍历数组（对象）的每一个值
基本使用
<li v-for="item in arr">
{{item}}
</li>
var vue = new Vue({
el: "#app",
data: {
arr: [
'苹果',
'橘子',
'香蕉',
'草莓'
]
}
})
item是arr数组的每一项枚举值
v-for还有index和key属性
<li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li>
item指的是被遍历的数组（对象）的每一个值，item的命名不是规定的，可以自定义命名
index指的是每一项被遍历的值的下标索引值
key是用来给每一项值加元素标识，作用是为了区分元素，为了实现最小量的更新
v-for还可以用来遍历对象
var vue = new Vue({
el: "#app",
data: {
obj:{
name: '小明',
age: '17岁',
height: '175cm',
sex: '男',
hobby: '打篮球'
}
}
})
<li v-for="(item,index) in obj" :key="index">{{index}}:{{item}}</li>
和数组内容不同的是index此时代表的是对象的key
正确的表示方法
<li v-for="(item,key,index) in obj" :key="index">{{index}}-{{key}}:{{item}}</li>
上面的v-for一共有三个参数
item表示对象的内容，
key表示的是对象key键值名称
index表示的是当前obj的下标索引值
实际工作中我们使用v-for遍历JSON更多一点
var vue = new Vue({
el: "#app",
data: {
arr: [
{name:'小明',age: '17',sex:'男',height: '168'},
{name:'小红',age: '18',sex:'女',height: '165'},
{name:'小周',age: '19',sex:'男',height: '178'},
{name:'小刚',age: '20',sex:'男',height: '167'}
]
}
})
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>身高</th>
</tr>
<tr v-for="(item,index) in arr">
<!-- JOSN中的姓名 -->
<td>{{item.name}}</td>
<!-- JOSN中的年龄 -->
<td>{{item.age}}</td>
<!-- JOSN中的性别 -->
<td>{{item.sex}}</td>
<!-- JOSN中的身高 -->
<td>{{item.height}}</td>
</tr>
</table>
v-for是可以进行嵌套的
<body>
<div id="app">
<table>
<tr v-for="i in number" :key="i">
<td v-for="j in i" :key="j">{{i}}X{{j}}={{i*j}}</td>
</tr>
</table>
</div>
<script src = "js/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
number:[1,2,3,4,5,6,7,8,9]
}
})
</script>
</body>
使用 v-for需要注意的情况
1)v-for遍历的出来的不是数据，而是元素
2)如果使用item和index的时候一定要使用括号包裹起来
(item,index) in arr
