v-for指令，看名字想必大家也能猜到其作用，沒錯，就是用來迭代、遍歷的。
1、簡單數組的遍歷
<body>
<divi id="app">
<span v-for="item in list">{{item}} </span>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:['one','two','three','four','five']
},
methods:{}
})
</script>
</body>
data里定義了list字符串數組，在頁面中使用v-for指令對list進行遍歷，"item"是當前正在遍歷的元素對象，“in”是固定語法，“list”是被遍歷的數組。用插值表達式來展示當前遍歷的對象。
有時除了遍歷數據外，我們還需要當前遍歷的序號：
<divi id="app">
<span v-for="(item,i) in list">序號為：{{i}}，元素為：{{item}}<br></span>
</div>
（Item,i）其中i為序號，當然i和item是臨時變量可以任意定義。運行結果：
2、對象數組的遍歷
<body>
<divi id="app">
<span v-for="(item,i) in list">序號：{{i}}，科目為：{{item.course}}，分數為：{{item.score}}<br></span>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:[
{'course':'語文', 'score':89},
{'course':'數學', 'score':80},
{'course':'英語', 'score':90}
]
},
methods:{}
})
</script>
</body>
通過"item.score"的方法，來獲取對象的屬性值。運行結果如下：
3、遍歷對象
<body>
<divi id="app">
<span v-for="(value,key) in mark">屬性名：{{key}}，屬性值：{{value}}<br></span>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
mark:{
'語文':90,
'數學':95,
'英語':89
}
},
methods:{}
})
</script>
</body>
這里定義了一個mark對象，該對象有三個屬性，遍歷對象的時候固定寫法為：(XX,YY)，其中YY為對象的key，XX為對象的值。
當然也可以寫成：(XX,YY,i)，其中i為索引值。
4、遍歷數字
<divi id="app">
<span v-for="count in 5">當前數字為：{{count}}<br></span>
</div>
這里in后面直接寫的是具體的數字。運行結果：
總結：v-for進行遍歷的時候，其可以遍歷數組、對象數組、對象、數字。
每天進步一點點！