### 基本用法：
`v-for`指令是循環渲染一組 data 中的數組，`v-for` 指令需要以 `item in items` 形式的特殊語法，items 是源數據數組并且 item 是數組元素迭代的別名。
**模板寫法**
~~~html
<li v-for="item in items">
{{item}}
</li>
~~~
**js寫法**
~~~html
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
~~~
完整代碼：
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>V-for 案例</title>
</head>
<body>
<h1>v-for指令用法</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
</script>
</body>
</html>
~~~
這是一個最基礎的循環，先在 js 里定義了 items 數組，然后在模板中用 `v-for` 循環出來，需要注意的是，你需要那個 html 標簽循環，v-for 就寫在那個上邊。
二、排序
我們已經順利的輸出了我們定義的數組，但是我需要在輸出之前給數組排個序，那我們就用到了 Vue 的 computed 屬性。
~~~
computed:{
sortItems:function(){
return this.items.sort();
}
}
~~~
我們在 computed 里新聲明了一個對象 sortItems ，如果不重新聲明會污染原來的數據源，這是Vue 不允許的，所以你要重新聲明一個對象。
如果不重新聲明報錯：
如果一切順利的話，你已經看到了結果，但是這個小程序還是有個小Bug的，現在我把數組修改成這樣。
~~~javascript
items:[20,23,18,65,32,19,5,56,41]
~~~
我們把其中的54修改成了5，我們再看一下結果，發現排序結果并不是我們想要的。
我們可以自己編寫一個方法sortNumber，然后傳給我們的sort函數解決這個Bug。
~~~javascript
function sortNumber(a,b){
return a-b
}
~~~
**用法**
~~~javascript
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
~~~
經過一番折騰，我們終于實現了真正的數字排序，這是在工作中非常常用的，一定要學好，記住。
### 對象循環輸出
我們上邊循環的都是數組，那我們來看一個對象類型的循環是如何輸出的。
我們先定義個數組，數組里邊是對象數據
~~~javascript
students:[
{name:'jspang',age:32},
{name:'Panda',age:30},
{name:'PanPaN',age:21},
{name:'King',age:45}
]
~~~
**在模板中輸出**
~~~html
<ul>
<li v-for="student in students">
{{student.name}} - {{student.age}}
</li>
</ul>
~~~
**加入索引序號：**
~~~html
<ul>
<li v-for="(student,index) in students">
{{index}}：{{student.name}} - {{student.age}}
</li>
</ul>
~~~
排序，我們先加一個原生的對象形式的數組排序方法：
**數組對象方法排序:**
~~~javascript
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}
~~~
有了數組的排序方法，在computed中進行調用排序
~~~javascript
sortStudent:function(){
return sortByKey(this.students,'age');
}
~~~
